[JS] 자바스크립트 실행컨텍스트 Execution Context (1)

JS Execution Context 실행컨텍스트란

코드에 제공할 환경정보를 모아둔 객체
호이스팅, 외부환경정보 구성, this값 설정
콜스택이라는 스택에 실행정보를 쌓아두면서 자바스크립트 코드의 실행순서를 보장 받을 수 있도록 한다.

 

코드 실행 순서 보장

var a = 1
function outer(){
    function inner(){
        console.log("inners console : ",a)
        var a =3
    }
    inner()
    console.log("outers console : ", a)
}
outer()
console.log("console : ",a)

 

위와 같은 자바스크립트 코드가 있을때 위의 실행정보는 다음의 순서로 콜스택에 들어가게 된다.

console.log()도 모두 콜스택에 실행 컨텍스트 생성하지만 설명의 편의를 위해 생략하도록 하겠다.

콜스택 최 상단의 코드만을 활성화 하면서 순서를 제어한다. 

콜스택 생성 및 호출

실행 컨텍스트의 구조

실행컨텍스트는 VariableEnvironment(V.E), LexicalEnvironment(L.E), This 바인딩 정보를 가지며

각각의 V.E와 L.E는 변수 식별자 정보를 가지고 호이스팅을 하는 레코드와 외부 환경정보를 가지고 있는 아우터를 가진다.

그림으로 정리해 보았다.

실행컨텍스트의 구조

V.E는 변수및 함수 선언 시점의 스냅샷을 가지며 변경되지 않는다

반면 L.E는 코드진행에 따라 값이 계속해서 변경된다.

 

실행 컨텍스트의 동작

예시를 통해 실행컨텍스트의 동작을 살펴보자.

console.log(food)  // error
let food = "치킨"
var think = "배고프다"
function outerFn(){
     console.log(food)   // undefined
     console.log(think)  // undefined
     var food = "라면" 
     var think = "묵자"
     console.log(food, think)
    // 라면 묵자
     function innerFn(){
         var food = "야식라면"
         var think = "배불러. 이제 밥 그만."
         console.log(food, think)
         // 야식라면 배불러. 이제 밥 그만.
         return think
     }
     think = innerFn()
     console.log(think)  
     // 배불러. 이제 밥 그만.
}
outerFn()
console.log(food, think)  
// 치킨 배고프다

 

위와 같은 자바스크립트 코드가 있을 때 실행컨텍스트는 다음과 같이 동작한다.

콜스택에 쌓이는 실행컨텍스트 동작의 흐름

 

실행 컨텍스트의 동작 #1

실행컨텍스트가 생성된다. Record 부분에 변수 식별자가 등록된다.

이때 var와 ES6에서 추가된 let, const는 차이가 있다.

var로 선언된 함수는 선언되자 마자 undifined로 초기화 되지만 let이나 const로 선언한 함수는 선언이 되더라도 실행컨텍스트 생성 단계에서는 초기화 되지 않는다.

var로 선언되자마자 초기화 된 변수는 작성 라인 위에서 호출하더라도 별도의 오류 없이 undifined를 리턴하지만 초기화 되지 않은 변수들은 에러를 발생시킨다. 함수는 실행컨텍스트 생성 단계 때 선언된다.

생성단계가 지나 실행단계가 되면 초기화 되었던 변수들이 코드 진행에 맞추어 값이 변경된다.

이렇게 변경된 내용은 L.E에만 반영된다.

 

실행 컨텍스트의 동작 #2

outerFn() 호출 구문을 만나 outerFn함수에 대한 실행 컨텍스를 생성한다.

food와 think 변수를 선언하고 undifined로 초기화 한다.

생성 단계가 지나고 실행단계가 되면 코드 진행에 따라 값이 변경된다.

 

실행 컨텍스트의 동작 #3

마찬가지로 innerFn에 대한 콜스택이 생성되고, 이후 실행되면서 undifined로 초기화된 값들에 값들을 할당한다.

실행 컨텍스트의 동작 #4

innerFn함수가 종료 되고 해당 함수의 리턴 값을 outerFn의 think값으로 할당한다.

변경된 내용은 L.E에만 반영되고 있다.

실행 컨텍스트의 동작 #5

outerFn 함수가 종료되고 실행컨텍스트도 사라진다.

마지막 코드까지 실행되면 전역 컨텍스트도 사라지면서 동작을 마무리한다.