변수를 정의하는 위치, 그리고 함수 [자바스크립트]

숫자야구게임 만드는 중. 

 

입력값이 세 자리인지 확인하려 하는데 세 자리 숫자를 넣어도 alert("nope")이 자꾸 뜸.

var userNum = document.getElementById("input").value.toString().split("");
function check() {
	if (userNum.length !== 3) {
	alert("nope")
	}
}

 

그래서 콘솔로그를 해 봄.

var userNum = document.getElementById("input").value.toString().split("");
function check() {
	console.log(el);
}

빈 배열이 찍힘. 입력값에 접근하지 못한다고 해석.

 

변수를 함수 안에서 선언하고 값을 설정해 보기로.

function check() {
	var userNum = document.getElementById("input").value.toString().split("");
	console.log(userNum);
}

123 넣어봤더니 ["1", "2", "3"] 찍힘!

 

다시 원래 코드로 돌아가서 변수를 함수 안에서 정의해 봄.

function check() {
	var userNum = document.getElementById("input").value.toString().split("");
	if (userNum.length !== 3) {
	alert("nope")
	}
}

정상 작동.

 

문제를 해결한줄 알았더니 다른 문제 발생.

 

변수를 함수 안에서 정의하는 바람에 함수 바깥에서 userNum에 접근하지 못 함.

함수 밖에서 변수를 선언하고 안에서 정의해도 마찬가지 문제 발생.

다음 단계에서 userNum 값을 사용해야 하는데 값이 undefined로 나와버림.

Scope나 execution context와 관련이 있을 것 같은데 공부 필요. 

 

>>> 알고 보니 단순히 코드 실행 순서가 문제. 

빈배열이 찍히는 이유는 해당 코드를 실행할 때는 아직 비었기 때문.

 

함수를 거쳐서 나온 값을 함수 아래에서 userNum에 넣어주는 방법으로 해결.

var userNum;
function check() {
    userNum = document.getElementById("input").value.toString().split("");
    if (userNum.length !== 3) {
        alert("nope")
    }
    return userNum;
}
userNum = check;