코어 자바스크립트 정리 - [2] 실행 컨텍스트

01 - 실행 컨텍스트란?

실행 컨텍스트(execution context) : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 

 

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

 

실행 컨텍스트를 구성하는 방법으로는 전역공간, eval()함수, 함수 등이 있다.

 

 실행 컨텍스트 예제 ) 

var a = 1;
function outer() {
    function inner() {
        console.log(a);	// log : undefined
        var a = 3;
    }
    inner();            
    console.log(a);     // log : 1
}
outer();                
console.log(a);         // log : 1

 콜 스택

1. 시작 : empty
2. [ Line 1 ] : 전역 컨텍스트
3. [ Line 10 ] : 전역 컨텍스트, outer
4. [ Line 7 ] : 전역 컨텍스트, outer, inner
5. [ Line 8 ] : 전역 컨텍스트, outer
6. [ Line 11 ] : 전역 컨텍스트
7. 종료 : empty

※ inner 함수 내부에서 console.log(a)가 undefined 로 출력되는 이유는 스코프체인 부분에서 설명.

실행 컨텍스트에 담기는 정보

• VariableEnvironment : (스냅샷)
  • environmentRecode : 선언당시의 컨텍스트 내의 식별자들에 대한 정보
  • outerEnvironmentReference : 선언당시의 외부 환경 정보.
• LexicalEnvironment :  ( 스냅샷이 아니므로 변경 사항이 실시간 반영 )
  • environmentRecode : 선언당시의 컨텍스트 내의 식별자들에 대한 정보
  • outerEnvironmentReference : 선언당시의 외부 환경 정보.
• ThisBinding : this 식별자가 바라보는 객체

 

02 - VariableEnvironment 

최초 실행시의 환경을 저장하고 있는 환경 정보 ( 스냅샷 )

초기화 과정에는 LexicalEnvironment 와 같다.

 

03 - LexicalEnvironment

1) environmentRecode 와 호이스팅

environmentRecode

컨텍스트 내부 전체를 처음부터 끝까지 순서대로 수집하며, 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨. ( 함수, 변수의 식별자 )

 

호이스팅 ( https://developer.mozilla.org/ko/docs/Glossary/Hoisting ) 

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미.

• 초기화를 제외한 선언만 호이스팅 적용됨. ( 초기화, 값 할당은 실행 과정에서 동작 )
• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화.
• let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음. 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생 

자바스크립트 엔진은 호이스팅 과정을 통해서 코드가 실행되기도 전에 변수명, 함수명을 모두 알게 된다.

호이스팅 예제) 

function a () {
    console.log(b);
    var b = 'bbb';
    console.log(b);
    function b () {}
    console.log(b);
}
a();

예제 실행결과)

1. function b
2. 'bbb'
3. 'bbb'

★ function a 의 호이스팅 및 실행 과정

호이스팅

1. [ Line 3 ] 변수 b에 대한 메모리를 미리 할당 - b : undefined
2. [ Line 5 ] 변수 b에 대한 메모리에 함수 할당 - b : function b () {}

※ 호이스팅 과정에서 동일한 변수에 서로 다른 값을 할당할 경우, 나중에 할당한 값이 저장됨.

실행 

1. [ Line 2 ] 변수 b의 값 출력
2. [ Line 3 ] 변수 b에 'bbb' 값 할당
3. [ Line 4 ] 변수 b에 값 출력
4. [ Line 6 ] 변수 b에 값 출력

 

2) 함수 선언문과 함수 표현식

• 함수 선언문( function declaration ) : function 정의부만 존재, 별도의 할당 명령 없음
• 함수 표현식( function expression ) : 정의한 function을 별도의 변수에 할당.

★ 함수 표현식을 사용했을 때, 코드 순서상 함수 선언 전에 함수를 호출하게 되면 에러 발생. "<> is not a function" 

함수 선언문은 호이스팅 과정에서 미리 메모리가 할당되어서, 코드 순서상 함수 호출이 먼저 오게 되어도 잘 동작한다.

// 함수 선언문. 함수명 a 가 변수명이 된다.
function a () {}
a();	// 실행 OK

// 익명 함수 표현식. 변수명 b 가 함수명이 된다.
var b = function () {}
b();	// 실행 OK
	
// 기명 함수 표현식. 변수명은 c, 함수명은 d가 된다.
var c = function d () {}
c();	// 실행 OK
d();	// 에러

 

3) 스코프, 스코프체인

스코프(Scope) : 식별자에 대한 유효범위

스코프 체인( Scope chain ) : 식별자의 유효범위를 안에서 바깥으로 검색해 나가는것.

여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인상에서 가장 먼저 발견된 식별자에만 접근 가능.

 

자바스크립트에서는 기본적으로 environmentRecode에서 식별자를 먼저 검색한 후에, 찾지 못했으면outerEnvironmentReference( LexicalEnvironment ) 을 사용해서 스코프체인을 수행한다.

 

스코프 체인 예제)

var a = 1;
function outer() {
    function inner() {
        console.log(a);	// log : undefined
        var a = 3;
    }
    inner();            
    console.log(a);     // log : 1
}
outer();                
console.log(a);         // log : 1

콜 스택

1. 시작 : empty
2. [ Line 1 ] : 전역 컨텍스트
   1. 호이스팅 : 현재 스택의 environmentRecode에 식별자 a, outer 메모리 할당.
   2. [ Line 1 ] : 전역 컨텍스트의 environmentRecode 에서 식별자 a 검색 [ 찾음 ].
   3. [ Line 1 ] : 식별자 a에 1 할당.
   4. [ Line 2 ] : 전역 컨텍스트의 environmentRecode 에서 식별자 outer 검색 [ 찾음 ].
   5. [ Line 2 ] : 식별자 outer에 함수 할당.
3. [ Line 10 ] : 전역 컨텍스트, outer
   1. 호이스팅 : 현재 스택의 environmentRecode에 식별자 inner 메모리 할당.
   2. [ Line 3 ] : outer 스택의 environmentRecode에 에서 식별자 inner 검색 [ 찾음 ].
   3. [ Line 3 ] : outer 스택의 environmentRecode에 식별자 inner 에 함수 할당.
4. [ Line 7 ] : 전역 컨텍스트, outer, inner
   1. 호이스팅 : 현재 스택의 environmentRecode에 식별자 a에 메모리 할당.
   2. [ Line 4 ] : 식별자 a의 값 접근
   3. [ Line 4 ] : inner 컨텍스트의 environmentRecode 에서 식별자 a 검색 [ 찾음 ].
   4. [ Line 4 ] : 식별자 a의 출력 : undefined
5. [ Line 8 ] : 전역 컨텍스트, outer
   1. [ Line 8 ] : outer 스택의 environmentRecode에 에서 식별자 a 검색 [ 없음 ].
   2. [ Line 3 ] : 전역 스택의 environmentRecode에 에서 식별자 a 검색 [ 찾음 ].
   3. [ Line 8 ] : 식별자 a의 값 출력 : 1
6. [ Line 11 ] : 전역 컨텍스트
   1. [ Line 11 ] : 전역 스택의 environmentRecode에 에서 식별자 a 검색 [ 찾음 ].
   2. [ Line 11 ] : 식별자 a의 값 출력 : 1
7. 종료 : empty

 

4 ) 전역변수와 지역변수

전역변수 : 전역 스코프에서 선언한 변수

지역변수 : 함수 내부에서 선언한 변수

 

 

04 - this

실행 컨텍스트의 thisBinding 에는 this로 지정한 객체가 저장됨.

실행 컨텍스트 활성화 당시에 this를 따로 지정하지 않은 경우, this에는 전역 객체가 저장.

 

 

---

참조 : 코어 자바스크립트 ( 정재남 )