스코프 체인

스코프 체인

스코프 체인은 "함수에서 어떤 값에 접근이 가능한가 혹은 어떤 값에 접근이 불가능한가"이다. 

블록("{}")이 기준이 된다. 함수 안에도 블록이 존재하며, 함수가 아닌 블록은 if, for, while, swtich 등이 있다.

 

-참고

const a = () => ({});

이 코드는 객체를 리턴하는 함수이다.

예시

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();
}

a();
c();

위 코드는 b가 정의되어 있지 않다는 에러가 나온다.

스코프 체인을 모른다면 이 에러를 해결할 수 없을 것이다.

 

-분석

위 코드를 접어보면 최상위에는 c와 a가 있다. 

 

그렇다면 "호출 스택 분석" 글에서 설명한 것 처럼 anonymous 안에 c와 a가 들어있는 것이다. 선언 부분만 잘 확인하면 된다.

• c -> anonymous
• a -> anonymous
• b -> c-> anonymous

실행을 하고나면 코드는 바뀌지 않기 때문에 이러한 관계를 렉시컬 스코프라고 한다.

즉 b는 c를 거쳐서 anonymous가 있는 것이다. 그렇기에 b의 부모는 c인데, a에서 사용하려하기에 에러가 났다.

 

그렇다면 b에서 a에 접근이 가능할까?

가능하다.

왜냐하면 b -> c -> anonymous(a)인데 anonymous가 a를 갖고 있기 때문이다.

 

-전체적인 선언 지도

• anonymous -> x, c, a
• c -> y, b
• b -> z
• a -> x

다시 한번 a에서 b에 접근하지 못하는 이유를 말하면

1. a -> x에서는 일단 b가 없고
2. a의 부모는 anonymous이니까, a -> anoymous(x, c, a)인데 b는 없기에 접근이 불가능하다.

그리고 선언 지도에서 다른 곳에 위치하면 x 처럼 같은 이름을 사용할 수 있다.

 

-출처

https://www.youtube.com/watch?v=0lF2zaQ31Ek&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3