2 .실행 컨텍스트,호이스팅

실행 컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

동일한 환경에 있는 코드들을 실행할  때 필요한 환경 정보들을 모아 컨택스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

 

Call stack 실행 컨텍스트 쌓이는 순서

                                                           inner 

                                outer                  outer                 outer    

전역  컨텍스트 ->전역 컨텍스트 -> 전역 컨텍스트 -> 전역컨텍스트 -> 전역컨텍스트 ->  

- 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점

 

2-3-1 environmentRecord와 호이스팅

environmeentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다. 컨텍스트를 구성하는 함수에 저장된 매개변수 식별자, 선언한 함수가 있을 경우 그 함수 자체, var로 선언된 변수의 식별자 등이 식별자에 해당한다. 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집한다.

 

참고

전역 실행 컨텍스트는 변수 객체를 생성하는 대신 자바스크립트 구동 환경이 별도로 제공하는 객체, 즉 전역 객체를 활용한다. 전역 객체에는 브라우저의 window, Node.js의 global 객체 등이 있다. 이들은 자바스크립트 내장 객체가 아닌 호스트 객체로 분류된다.

 

변수 정보를 수집하는 과정을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드들은 실행되기 전의 상태이다. 코드가 실행되기 전임에도 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알고 있게 되는 셈이다. 그렇다면 엔진의 실제 동작 방식 대신에 '자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다'라고 생각하더라도 코드를 해석하는데 문제될 것이 없다. 여기서 호이스팅(hoisting)이라는 개념이 등장한다.

 

호이스팅 규칙

environmentRecord에는 매개변수의 이름, 함수 선언, 변수명 등이 담긴다.

출력 결과 예상 -> 1, undefined, 2

실제 출력 결과 -> 1, 1 ,2

 

호이스팅을 더 직관적으로 나타내보기 - 호이스팅을 마친 상태

호이스팅이 끝났기 때문에, 실제 코드를 실행할 차례이다.

 

- 첫 변수 x 선언, 메모리에서는 저장할 공간을 미리 확보하고, 확보한 공간의 주솟값을 변수 x에 연결해준다.

- 두번째, 세번째 다시 변수 x를 선언 -> 이미 선언된 변수가 있으므로 무시한다.

- x에 1을 할당하라고 한다. 우선 숫자 1을 별도의 메모리에 담고, x와 연결된 메모리 공간에 숫자 1을 가리키는 주솟값 입력

- console.log(x) --> 모두 1이 출력된다

- x에 2를 할당하라고 한다. 숫자 2를 별도의 메모리에 담고, 그 주솟값을 든 채로 x와 연결된 메모리 공간으로 간다. 여기에는 숫자 1을 가리키는 주솟값이 들어있는데, 이걸 2의 주솟값으로 대치한다. x는 숫자 2를 가리키게된다.

- x를 출력하라고 하니 2가 출력되고, 이제 함수 내부 모든 코드가 실행됬으므로 실행 컨텍스트가 콜 스택에서 제거된다.

 

 

 

호이스팅 또 다른 예제

출력예상 결과 -> undefined, bbb, function b

실제 출력 결과 -> function b, bbb, bbb

 

호이스팅을 마친 상태

실행 컨텍스트 내부의 코드를 차례대로 실행할 차례

- 변수 b를 선언한다. 메모리에서는 저장할 공간을 미리 확보하고, 확보한 공간의 주솟값을 변수 b에 연결해둔다.

- 다시 변수 b를 선언하고 함수 b를 선언된 변수 b에 할당하라고 함. 이미 선언된 변수 b가 있으므로 선언 과정은 무시한다. 함수는 별도의 메모리에 담길 것이고, 그 함수가 저장된 주솟값을 b와 연결된 공간에 저장한다. 이제 변수 b는 함수를 가리키게 된다.

- 변수 b에 할당된 함수 b를 출력한다

- 변수 b에 'bbb'를 할당하라고 한다. b와 연결된 메모리 공간에는 함수가 저장된 주솟값이 담겨있었는데 이걸 문자열 'bbb'가 담긴 주솟값으로 덮어쓴다. 이제 변수 b는 문자열 'bbb'를 가리키게 된다.

-  console.log(b);가 모두 'bbb'가 출력이 되고, 이제 함수 내부의 모든 코드가 실행됬으므로 실행 컨텍스트가 콜 스택에서 제거된다.