실행 콘텍스트 (Execution context)

 

1. 실행 컨텍스트란

실행가능한 자바스크립트 코드 블록이  실행되는 환경이다.

 

함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 자바스크립트 엔진에 있는 콜스택에 차곡차곡 쌓인다.

그리고 가장위에있는 컨텍스트와 관련 있는 코드를 실행하면서, 전체 코드의 환경과 순서를 보장하게 된다.

 

 

 

아래의 예제로 이해보자

let santa = false; // 전역 컨텍스트
var rudolf = false;
function christmas() {	
  let santa = true;

  function givePresent() { 
    let gift = "cat";
    console.log(gift); // cat
    console.log(santa); // false
    console.log(rudolf); // false
  }

  givePresent(); // (2)
}

christmas(); // (1)

 

이런 코드를 실행하려고 하면 

처음으로 전역 컨텍스트가 호출 스택에 추가된다

실행컨텍스트가 호출스택에 쌓여가는 과정을 그림으로 그려 이해해보자

 

2. 실행 컨텍스트의 구성

 

2-1. 전역 컨텍스트의 생성

 

전역 컨텍스트란

코드가 실행되면 바로 생성되며, 컨텐스트중 제일 먼저 호출스택에 저장되는 컨텍스트이다.

생성단계에서 let으로 선언한 변수인 santa는 선언만되고 초기화는 이루어지지않고,

var로 선언된 rudolf는 선언과 동시에 undefined로 초기화가 이루어진다.

 

christmas() 도 함수선언문으로 선언되어서 호이스팅이 일어나 생성단계에서 전역컨텍스트에 기록된다

 

2-2. 전역 컨텍스트의 실행

 

전역컨텍스트가 실행단계로 들어간다. 이과정에서 함수 호출, 식별자 할당 등이 이루어진다.

초기화 되지 않아 아무 값이 없던 santa가 false로 할당 된다.

 

2-3. 함수 컨텍스트의 생성 christmas()

 

전역컨텍스트가 생성된이후 가장 먼저 호출되는 함수는 christmas() 이다.

따라서 호출스텍에 전역 컨텍스트 다음으로 christmas() 함수 컨텍스트가 쌓이게된다.

 

 

2-3. 함수 컨텍스트의 생성 givePresent()

 

christmas 함수 내부에서 givePresent 함수를 선언하고 호출한다.

따라서 givePresent 함수 컨텍스트가 호출 스택에 쌓이게 된다.

 

 

 

 

 

여기서 의문점?

let santa = false; // 전역 컨텍스트
var rudolf = false;
function christmas() {	
  let santa = true;

  function givePresent() { 
    let gift = "cat";
    console.log(gift); // cat
    console.log(santa); // false    -------->>>>>> 어떻게 호출??
    console.log(rudolf); // false  ------->>>>>> 어떻게 호출??
  }  

  givePresent(); // (2)
}

christmas(); // (1)

 

이해하던도중 그렇다면  givePresent 컨텍스트를 실행할때 어떻게 chrismas에있는 컨텍스트에 있는 santa를 호출할수있었을까??

라는 의문점이 든다.

이것을 이해하려면 실행컨테스트에 특수한객체인 outer를 이해해야한다.

 

 

3. outer 

console.log(gift)

1. gift의 값을 가져오기위해 givePresent 함수 컨텍스트의 환경 레코드를 참조한다.

2. givePresent 함수 컨텍스트의 환경 레코드에서 gift의 정보를 찾았기 때문에 console.log()를 문제없이 호출한다.

 

console.log(santa)

1. santa 의 값을 가져오기위해 givePresent 함수 컨텍스트의 환경 레코드를 참조한다.

2. 환경레코드에서 santa의 값을 찾지 못한다.

3. outer를 이용해 외부 렉시컬 환경인 chrismas 함수 컨텍스트로 이동후 환경레코드를 탐색한다.

4. santa 값을 찾으며 console.log()를 문제없이 호출한다.

 

console.log(rudolf)

1. rudolf의 값을 가져오기 위해 givePresent 함수 컨텍스트의 환경 레코드를 참조한다.

2. 환경레코드에서 rudolf의 값을 찾지 못한다.

3.  outer를 이용해 외부 렉시컬 환경인 chrismas 함수 컨텍스트로 이동후 환경레코드를 탐색한다.

4. 환경 레코드에서 rudolf를 찾지못해 outer를 이용하여 전역 컨텍스트로 이동한다.

5. 환경레코드를 탐색하여 rudolf를 찾고 console.log()를 문제없이 호출한다.

 

 

4. 스코프 체인(scope chain)

위에서 자바스크립트 엔진이 해당 영역에서 식별자를 찾는데 발견하지 못했을때 outer를 이용해여 외부 렉시컬 환경, 즉

외부 영역으로 이동하여 식별자를 찾는다는 것을 알 수 있었다.

 

이렇게 식별자를 찾기위해 외부스코프로 이동하여 탐색하는 현상을 스코프 체인이라고 한다.