스코프 체인

유튜브 ZeroCho 인간 JS 엔진 되기 영상을 보고 정리한 내용입니다.

스크포체인은 함수에서 어떤 값에 접근이 가능한지 아닌지를 보는 것입니다. 함수의 블록(중괄호) 기준으로 생각하면 되는데, 함수가 아니지만 블록을 가지는 것들로는 이런 것들이 있습니다.

switch () {

}

if () {

}

for () {

}

while () {

}

아래와 같은 코드의 경우 b() 로 호출하면 해당 함수 블럭으로 갈 수 있지만,

const x = "x";
function c() {
    const y = "y";
    console.log("c");
}

function a() {
    const x = "x";
    console.log("a");
    function b() {
        const z = "z";
        console.log("b");
        c();
    }
    b();
}

아래처럼 b 의 선언이 이동하면 호출이 불가능합니다.

const x = "x";
function c() {
    const y = "y";
    console.log("c");
    function b() {
        const z = "z";
        console.log("b");
        c();
    }
}

function a() {
    const x = "x";
    console.log("a");
    b();
}

이런 것을 판단하는 기준을 스코프 체인이라고 합니다. 이럴 때는 함수 선언 기준으로 접어서 보면 편합니다. 부모 요소르 찾아가서 해당 함수가 선언되어 있나 찾아보고(전역에 선언되어 있나) 있으면 쓰고 없으면 쓸 수 없습니다.

선언 지도를 따로 만들어 볼 수도 있습니다. (해당 부분에서 무엇이 선언되었나 보는 것)

anony - x, c, a
c - y, b
b - z
a - x

여기서 a 에서 b 에 접근할 수 있는지 판단하고 싶다면, a 와 a의 부모 요소인 anony 에서 b 가 선언되었나 확인하면 됩니다. 그리고 x라는 변수에 서로 다른 값이 들어 갔을 때 a 함수 블럭에서 콘솔로 찍히는 x 는 x2 인데, 이것은 단순히 가깝기 보다는 a - anony 순으로 찾으면서 a 에서 찾았으니 anony 까지 검색하지 않는다고 이해할 수 있습니다.

const x = "x";
function c() {
    const y = "y";
    console.log("c");
    function b() {
        const z = "z";
        console.log("b");
        c();
    }
}

function a() {
    const x = "x2";
    console.log("a");
    b();
    console.log(x);
}