스코프체인(Scope Chain)

스코프체인이란?

scope : 변수의 유효 범위

Chain : 사슬, 띠처럼 이어진 것

변수의 유효 범위는 실행 컨텍스트가 만드는 것으로 실행 컨텍스트에 의해서 결정된다.

실행 컨텍스트 실행 시 담기는 환경 정보 중 외부 식별자 정보로 인해 생기는 외부 식별자 정보에 대한 연결 매듭이라고 생각하면 된다.

아래 코드에서 결과가 어떻게 나올 까 ?

var a = 'window';

function outer(){
    console.log(a);

    function inner(){
        console.log(a);
        var a = 'inner';
    }

    inner();
}

outer();

console.log(a);

결과

var a = 'window';

function outer(){
    console.log(a); // window

    function inner(){
        console.log(a); // undefiend
        var a = 'inner';
    }

    inner();
}

outer();

console.log(a); // window

전역 실행 컨텍스트에서 var a = 'window';가 선언되어 있고,

outer()가 실행되면서 outer함수의 실행 컨텍스트가 생성되었다.

outer()에서 console.log(a);로 a에 대한 정보를 찾지만 outer() 내부에는 a에 대한 정보가 없어서 상위 컨텍스트인 전역 컨텍스트로 넘어가서 a에 대한 정보를 찾는 다.

이것이 스코프 체인이다.

outer()내에서 inner()가 실행되면서 또 inner 함수의 실행 컨텍스트가 생성 되었다.

inner()에서도 console.log(a);로 a를 찾아본다. 코드로만 봤을 때는 console.log(a) 다음으로 변수 a가 선언되어 outer()로 넘어가서 a를 찾을 것 같지만, inner()에서의 호이스팅으로 var a;가 먼저 상단에 정의 되어 있기 때문에 외부로 나가지 않고 할당 값이 없는 내부의 a를 바라보므로 undefiend가 찍힌다.

이것처럼 가장 가까운 값을 찾아 접근하면 그 다음 값으로 접근 할 수 없고 끝나는 것을 Shadowing이라고 한다.

정리

• Scope Chain이란, 가장 가까운 자기 자신부터 점점 멀리 있는 scope로 변수를 찾아 나가는 것
• Shadowing이란, 가린다는 뜻으로 가장 먼저 찾아간 것만 접근할 수 있는 개념

Reference

• 인프런 코어 자바스크립트