📝자바스크립트 3 | Lexical Environment, Scope Chain

 

function a(){
  let b = 10;
  function c(){
    console.log(b);
  }
  
  c();
}

a();
console.log(b);

위의 코드가 실행될 때 자바스크립트 엔진이 돌아가는 과정은 다음과 같다.

 

 

 

1. 먼저 전역 스코프에 위치하고 있는 변수 a를 담고, 변수 a에는 정의되어있는 함수를 할당한다. 

2. 그 다음 a 함수가 호출되고 전역 컨텍스트에서 a가 실행되어 let b = 10 코드가 실행된다. 

3. 이제 call stack memory에 a함수가 저장된 것과 마찬가지로 식별자 b와 c가 callstack에 저장된다(b : 10, c : function(){}).

4. 다음 c함수가 호출되고 console.log(b)를 만난다. 현재 활성화 상태인 c 컨텍스트에서 b를 검색한다. 

5. 변수 b는 c 안에 없기 때문에 c 컨텍스트에서 다시 a 컨텍스트가 활성화 된다. 

6. b가 화면에 찍히게 된다. 

7. a 함수의 실행이 종료된다. a 실행 컨텍스트가 콜 스택에서 제거된다. 그리고 다시 전역 컨텍스트가 다시 활성화된다. 

8. console.log(b)를 실행하고 전역 컨텍스트에 b가 없기 때문에 에러가 뜬다. 

9. 전역 컨텍스트가 콜 스택에서 제거되고 종료된다. 

 

 

Lexical Environment 

함수 C는 다음과 같이 표현할 수 있다.

C function is lexically sitting inside A function.

 

함수 A는 다음과 같이 표현할 수 있다. 

A function is lexically sitting inside Global scope.

 

이 두 문장의 의미는 C는 A의 lexical environment에 접근할 수 있고, A는 global lexical environment에 접근이 가능하다는 의미이다. 

 

 

 

 

 

 

 

Scope Chain

위의 코드에서 계속 lexical environment를 찾아가며 마지막엔 전역 컨텍스트의 lexical environment에 접근하였다. 그리고 C에서 바로 A를 참조하는 것이 아닌, 반드시 가장 가까운 요소인 b부터 차례대로 접근하고 있는 것을 볼 수 있다(다른 순서로 접근하는 것은 불가능). 

즉, 이렇게 '식별자의 유효범위'를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프 체인이라 한다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[참고자료]

https://www.youtube.com/watch?v=uH-tVP8MUs8 

 

http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYSgpewogIGxldCBiID0gMTA7CiAgZnVuY3Rpb24gYygpewogICAgY29uc29sZS5sb2coYik7CiAgfQogIAogIGMoKTsKfQoKYSgpOwpjb25zb2xlLmxvZyhiKTs%3D!!! 

http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYSgpewogIGxldCBiID0gMTA7CiAgZnVuY3Rpb24gYygpewogICAgY29uc29sZS5sb2coYik7CiAgfQogIAogIGMoKTsKfQoKYSgpOwpjb25zb2xlLmxvZyhiKTs%3D!!!