javascript - scope

자바스크립트의 var / let / const 변수 선언에 이어서
scope(범위)에 관련된 내용을 블로그에 정리해 본다.

Scope(범위)

'변수가 영향을 미치는 범위' 혹은 '변수의 유효 범위'
(포괄적으로 말하면 '코드가 유효한 범위')

1. 스코프의 구분

전역 변수 (Global variable)
전역에서 선언된 변수이며 어디에든 참조할 수 있다.

지역 변수 (Local variable)
지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

2. 자바스크립트 스코프의 특징

자바스크립트의 스코프는 타 언어와는 다른 특징을 가지고 있다.

대부분의 C-family language는 블록 레벨 스코프(block-level scope)를 따른다.

하지만 자바스크립트의 var는 함수 레벨 스코프(function-level scope)를 따른다.
함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수
외부에서는 유효하지 않다(참조할 수 없다)는 것이다.

단, ES6에서 도입된 let, const는 블록 레벨 스코프를 따른다.
(아래 이미지 참고)

3.함수 레벨 스코프

var a = "I'm a";
function foo() {
    var b = "I'm b";
    console.log(a);        //I'm a - 전역변수. 출력가능.
    if(true) {
        var c = "I'm c";
        console.log(b);    //I'm b - 해당 함수 내 선언한 변수. 출력 가능.
    }
    console.log(c);        //I'm c - 해당 함수 내 선언한 변수. 출력 가능.
}
foo();
function bar() {
    var d = "I'm d";
    console.log(d);    //I'm d - 해당 함수 내 선언한 변수. 출력 가능.
    console.log(a);    //전역변수. 출력가능.
    console.log(b);    //해당 함수 내 선언한 변수가 아님. Error
    console.log(c);    //해당 함수 내 선언한 변수가 아님. Error
}
bar();

var로 변수 선언 시 함수를 제외한 다른 블록에서는 밖에서도 호출이 가능하다.
단, 함수안에서 한 선언은 밖에서는 호출이 불가하다.

4. 블록 레벨 스코프

let foo = "I'm foo";
if(true) {
    let bar = "I'm bar";
    console.log(foo);   //I'm foo
    console.log(bar);   //I'm bar
}

console.log(foo);   //I'm foo
console.log(bar);   //Uncaught ReferenceError: bar is not defined.

let, const는 if, for, while, function 등 블록 내에서 선언한 것은 밖에서
호출이 불가하다.

참고1
참고2