스코프 체인

 호출 스택에 대해 쉽게 이해하기 위해선 반복된 연습을 통해 충분히 가능합니다. 

 

스코프 체인을 간단히 말하면, 함수에서 어떤 값에 접근이 가능한가? 접근이 불가능한가? 에 대한 개념입니다. 다음 예제를 통해 이해를 돕겠습니다.

 

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


a();
c();

 

위 예제는 앞에 '호출스택' 에서 나온 예제입니다. a 함수를 실행하면서 a 함수의 마지막 부분에서 b 함수를 호출하고, 우리는 a 함수 내에 있는 b 함수를 실행할 수 있습니다.

 

하지만, 다음과 같이 b 함수가 a 함수가 아닌 c 함수 내에 있다면 어떻게 될까요? 

 

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

 

예상했다시피 a 함수에서 호출한 b 함수를 c 함수 내에서 정상적으로 실행할 수 없습니다.

 

 

스코프 체인의 개념을 모르고서 본다면 분명 함수를 선언하고, 호출을 했는데 왜 안되는 건지 이해할 수 없습니다. 이유는 b 함수가 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();

 

그럼 위 예제는 다음과 같이 설명할 수 있겠죠.

 

 

annoymous 란 파일 전체에 있는 범위라고 생각하면 됩니다. 그럼 c 함수와 a 함수는 annoymous 함수 범위 내에 있다는 것을 의미합니다. 들여쓰기를 통해 해당 함수가 어느 스코프에 있는지 확인할 수 있습니다. 추가로 에디터의 함수를 요약하는 기능을 이용하면 더 쉽습니다. 

 

한 번 코딩을 한 후 함수 선언 부분은 쉽게 해당 스코프의 관계가 바뀌지 않는데 이를 lexical scope 라고 합니다.

 

이 과정, 스코프 체인을 분석을 하려고 한 이유가 어떤 함수에서 어떤 변수에 접근이 가능한지 불가능한지에 대해 알기 위함입니다. 

 

위처럼  a 함수 내에서 b 함수에 접근이 가능한지 분석해보기 위해서 첫 번째로 function a → annoymous 를 쳐다봅니다. 그리고, a 함수와 annoymous 함수가 있다는 것을 보고, 두 함수에서 b 함수의 호출이 아닌 함수 선언이 있는지 찾아야 합니다. 찾을 경우, 스코프 내에 있어 b 함수를 호출할 수 있고, 그렇지 않은 경우 스코프 외에 있어 b 함수를 호출하지 못한다는 결론이 나옵니다.

---

이를 활용해 화살표 뜻을 반대로 해 해당 함수에서 접근가능한 변수(함수를 포함한) 표를 만들 수 도 있습니다.

 

 

여기서 중요한 것은 역시 함수선언과 함수호출을 구분할 줄 알아야 한다는 점입니다. 구분할 줄만 안다면 스코프 체인에 대해서도 어렵지 않게 해결할 수 있을 겁니다. 

 

참고로 annoymous 의 변수 x 와 a 함수의 변수 x 는 서로 다른 스코프에 존재하므로 둘의 존재는 가능합니다. 이 말은 같은 스코프 내에 같은 변수의 재선언은 불가능하다는 의미입니다. 

 

이전에 배웠던 내용임에도 게임을 만들면서 실제로 코딩을 해보면서 스코프가 어디부터 어디까지 적용되는지 등 함수 간에 변수가 어떻게 적용되는지 헷갈리는 상황이 꽤 많았는데 이번 강의를 통해 함수의 스코프가 명확히 어디까지인지와 그리고 해당 함수에서 접근하고자 하는 변수에 접근이 가능한지 불가능한지에 대해 알고, 이를 설명할 수 있게 되었습니다.