Javascript - 실행 컨텍스트

서론

면접 준비 겸 자바스크립트의 기초 내용인 실행 컨텍스트, 호이스팅에대해 알아보도록 하겠습니다.

실행 컨텍스트

실행 컨텍스트는 코드가 실행되기 위해 필요한 환경(조건이나 상태) 정보들을 모아놓은 객체입니다.
실행 컨텍스트가 생성되는 시점은 일반적으로 매 함수 호출시에 생성됩니다. 그리고 함수 호출 외에도 프로그램 실행 시 전역 컨텍스트 생성, eval() 함수 실행에도 실행 컨텍스트가 구성됩니다.

실행 컨텍스트의 역할

• 호이스팅 수행
• this 값을 결정
• 식별자에 대한 유효 범위 파악
• arguments 관리
• 변수의 생성, 메모리 할당에 관여

실행 컨텍스트의 콜스택

우리의 코드에서 함수가 호출되면 call stack에 실행 컨텍스트가 순차적으로 쌓이게 됩니다.

function 외부함수() {
  	
	function 내부함수() {
      ...
    }
  	...
}

외부함수();

// call stack

|				|
|	내 부 함 수	|
|---------------|
|   외 부 함 수	|
|---------------|
|	전 역 객 체	|
|_______________| 

이렇게 쌓인 call stack의 맨 위에 있는 컨텍스트가 현재 실행 중인 컨텍스트이며, 실행 후에는 실행 컨텍스트가 파기되고, 다음 스택으로 넘어가면서 순차적으로 실행됩니다.

실행 컨텍스트의 정보

실행 컨텍스트의 정보에는 크게 3가지로 구성되어 있습니다.

• Variable Environment
  • enviroment record (식별자 정보 저장)
  • outer environment record (외부 환경 참조)
• Lexical Environment
  • enviroment record (식별자 정보 저장)
  • outer environment record (외부 환경 참조)
• ThisBinding

Variable Environment (변수 환경)

• 실행 컨텍스트가 생성되는 시점의 환경 정보가 스냅샷으로 저장됩니다. 이 정보는 원본 상태로 존재하며 이 스냅샷으로 렉시컬 환경을 생성합니다.

Lexical Environment (렉시컬 환경)

• 렉시컬 환경이란 특정 코드가 작성, 선언된 장소를 의미합니다. 초기에는 Variable Environment과 같은 정보를 갖고있습니다. 하지만 함수 실행 도중에 변경되는 사항이 있다면 바로 반영됩니다.

Environment Record

• Enviroment Record에는 현재 컨텍스트 안에 있는 코드의 식별자 정보가 저장됩니다. 컨텍스트 내부를 순차적으로 수집하는데 변수명, 선언 된 함수명, 매개변수명 등을 수집합니다. 이 과정은 코드가 실행되기 전에 이루어지며 이를 호이스팅이라고 합니다. 호이스팅에 대한 설명은 다음 글에서 좀 더 상세히 다루도록 하겠습니다.

Outer Environment Reference

• 바로 직전 컨텍스트의 Lexical Environment를 참조하여 직전 컨텍스트의 식별자에 접근할 수 있도록 해줍니다. 스코프라는 개념이 등장하는데 이는 식별자에 대한 유효 범위를 나타냅니다. 현재 컨텍스트에서 식별자(ex:변수)를 찾지 못하였을 때 직전 컨텍스트에 접근하여 찾는 과정을 스코프 체인이라고 합니다.
  스코프 체인또한 다음 글에서 좀 더 상세히 다루도록 하겠습니다.

ThisBinding

• this 식별자가 바라봐야 하는 대상 객체가 저장된다.

정리

• 실행 컨텍스트란 코드를 실행하기 위해 필요한 정보들을 모아놓은 객체이다.
• 실행 컨텍스트의 생성은 프로그램 실행 시, 함수의 호출, eval() 함수의 실행 시 생성된다.
• 함수가 호출되면 call stack에 실행 컨텍스트가 순차적으로 쌓이며 가장 위에 있는 실행 컨텍스트가 현재 실행 중인 컨텍스트이다. 들어간 순서의 역순으로 실행처리가 된다.
• Variable Environment
  • 실행 컨텍스트 생성 시점의 식별자 정보를 저장
• Lexical Environment
  • Variable Environment와 초기 정보는 동일하지만 변경 사항이 있으면 즉시 변경 됨
• Environment Record
  • 식별자를 수집하여 저장 이 과정에서 호이스팅을 수행
• Outer Environment Reference
  • 직전의 컨텍스트를 참조하고 있다.
  • 현재 실행 컨텍스트에서 찾을 수 없는 식별자가 있다면 직전 컨텍스트를 방문하여 탐색한다. (스코프) .
    .
    .
    .
    .

    참고 사이트
    자바스크립트를 모르는 친구의 고개를 끄덕이게 하기 (feat.실행 컨텍스트)
    
    자바스크립트의 실행 컨텍스트 (Execution Context) 란?
    [JS] Execution Context(실행 컨텍스트)