거지같은 JS 문법 파헤치기 - 스코프(변수는 어디에서 와서 언제 가는가)

JS는 다소 특별한 변수 스코프를 가지고 있습니다.

다른 언어(Java 등)의 지역 변수는 보통 블록(중괄호)이 끝나는 지점에서 해제되는데요,

JS는 var, let, const로 선언된 변수가 각각 해석하는 블록 범위가 상이합니다.

 

(참고 : 여기서 말하는 블록은 대부분 닫는 대괄호 '}' 를 의미합니다.)
ex) if, for, while, try/catch, 함수 등

// Java 예시
if (true) {
    int a = 1;
    System.out.println(a); // 1
}
System.out.println(a); // 에러

 

let, const : 블록 레벨 스코프

let, const로 선언된 변수는 다른 언어와 비슷합니다.

모든 코드 블록을 스코프로 인정합니다.

if (true) {
    let a = 1;
    console.log(a); // 1
}
console.log(a); // ReferenceError: a is not defined

 

var : 함수 레벨 스코프

if (true) {
    var a = 1;
    console.log(a); // 1
}
console.log(a); // 1

var로 선언된 변수는 오로지 함수 블록만 지역 변수 블록으로 인정합니다.

if, for, while, try/catch 등의 블록을 스코프로 인정하지 않습니다.

function foo() {
    var a = 1;
    console.log(a); // 1
}
foo()
console.log(a); // ReferenceError: a is not defined

 

주의사항

var i = -1;

for (var i=0; i<100; i++) { }

console.log(i); // 100

var i = 0;

for (let i=0; i<100; i++) { }

console.log(i); // -1

for문 등에서 임시 변수를 var로 선언하면

상위 스코프에 영향을 끼칠 수 있으니 조심하세요