13장 스코프

13.1 스코프란?

  스코프란 식별자 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 앞서 경험한 바와 같이 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문이다.

function add(x, y){
    console.log(x, y);
    return x + y;
}

console.log(add(2, 5)); //  2 5  // 7

console.log(x,y); // ReferenceError발생

  변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언할 수 있다. (이때 코드 블록이나 함수는 중첩될 수 있다.) 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 앞서 말했듯이 변수뿐만 아니라 모든 식별자가 그렇다. 

var x = 'global';

function foo(){
    var x = 'local';
    console.log(x); // local
}

foo(); 

console.log(x); // global

  위의 코드를 살펴보면 코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름을 갖는 x 변수를 선언했고 cosole.log()를 통해 x변수를 참조했다. 이때 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정해야 한다. 이를 '식별자 결정'이라 한다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다. 위 코드의 가장 바깥 영역에 선언된 x 변수는 어디서든 참조할 수 있다. 하지만 foo 함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수 있고 foo 함수 외부에서는 참조할 수 없다. 이때 두 개의 변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수다. 만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일이키므로 프로그램 전체에서 하나밖에 사용할 수 없다. 핵심은 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.

 

※기초개념

- var 키워드로 선언된 변수 : 같은 스코프 내에서 중복 선언이 허용된다.

(중복 선언시, 자바스크립트 엔진은 var 키워드가 없는 것처럼 동작하여 재할당을 하게 됨)

- let, const 키워드로 선언된 변수 : 같은 스코프 내에서 중복 선언을 허용하지 않는다.

function foo(){
    var x = 1;

    var x = 2; // 같은 스코프 내에서 var키워드로 중복 선언
    console.log(x); // 2
}

foo();


function bar(){
    let x = 1;

    let x = 2; // 같은 스코프 내에서 let키워드로 중복 선언
    console.log(x); // SyntaxError 발생
}

bar();

 

13.2 스코프의 종류

  코드는 전역과 지역으로 구분할 수 있다. 이때 변수는 자신이 선언된 위치, 즉 전역 또는 지역에 의해 자신이 유효한 범위인 스코프가 결정된다. 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수다.

 

13.2.1 전역과 전역 스코프

  전역이란 코드의 가장 바깥 영역을 말한다. 전역은 전역 스코프를 만든다. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조할 수 있다.

 

13.2.2 지역과 지역 스코프

  지역이란 함수 몸체 내부를 말한다. 지역은 지역 스코프를 만든다. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다. 지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조할 수 있다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다. 

 

13.3 스코프 체인

  모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다. 스코프가 계층적으로 연결된 것을 스코프 체인이라 한다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

 

var x = 'global x';
var y = 'global y';

function outer(){
    var z = 'outer\'s local z';

    console.log(x); // global x - outer함수 몸체 내에 x식별자가 없으므로 상위 스코프에 있는 전역 x 변수를 참조함
    console.log(y); // global y - outer함수 몸체 내에 y식별자가 없으므로 상위 스코프에 있는 전역 y 변수를 참조함
    console.log(z); // outer's local z - outer함수 몸체 내에 z 식별자가 존재하므로 지역 z 변수를 참조함

    function inner(){
        var x = 'inner\'s local x';

        console.log(x); // inner's local x - inner함수 몸체 내에 x식별자가 먼저 검색되므로 해당 지역 x 변수를 먼저 참조함
        console.log(y); // global y - inner함수 몸체 내에 y 식별자가 없고 >> outer함수 몸체 내에 y 식별자가 없어 >> 전역 변수 y를 참조함 
        console.log(z); // outer's local z - inner함수 몸체 내에 z 식별자가 없으므로, 상위 스코프 outer 함수 내에 있는 지역 z 변수를 참조함
    }

    inner();
}

outer()

console.log(x); // global x - 전역에서 참조하는 코드이므로 전역에 있는 전역변수 x를 참조함
console.log(z); // ReferenceError - 전역에는 전역변수 z가 없으므로 참조에러 발생

 

  가장 주의해야 할 점은 자바스크립트 엔진이 절대 하위 스코프로 내려가면서 식별자를 검색하는 일은 없다. 이는 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다는 것이다!

 

13.4 함수 레벨 스코프

  앞에서 정의 했듯이 지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 만든다고 했었는데, 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 뜻이다. 그러나 다른 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만든다. 이러한 특징을 블록 레벨 스코프라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특징을 함수 레벨 스코프라 한다. (참고로 let, const키워드로 선언한 변수는 블록 레벨 스코프 특징을 갖는다. 자세한 내용은 뒤에 배울 예정)

var x = 10; // 전역변수x다.

if(true){
    var x = 100; // 전역변수x다.(함수 레벨 스코프)
}

function local(){
	var x = 1000; // 지역변수xek.(함수 레벨 스코프)
}

console.log(x); // 100 (전역에서 호출되었으므로, 전역에서 변수x를 참조함)