실행 컨텍스트

1. Intro

실행컨텍스트는 자바스크립트가 동작하는 원리중 가장 핵심입니다. 하지만 이 실행컨텍스트를 이해하는 것이 굉장히 어렵습니다.

첫 번째로 호이스팅, this , window, 전역객체, argumetns 등 자바스크립트의 실행되는 메커니즘이 다 들어가는 것은 물론 자료구조의 콜스택을 알고 있어야 이해할 수 있기 때문입니다.

두 번째로 실행 컨텍스트는 ECMA3나 ECMA5같은 오래된 자료이 많습니다. 블로그 등의 오래된 자료를 위주로 정리된 글도 있고 오래된 것을 맹목적으로 믿어서 퍼지는 자료들이 있습니다.

그렇기때문에 실행컨텍스트를 제대로 이해하기 위해서는 자바스크립트를 어느정도 이해하고 알아가면서 실행컨텍스트를 반복적으로 보면서 검증된 자료가 맞는지를 체크해보는 것이 좋습니다.

아래 첨부된 ECMA의 명세 중 Execution Contexts에서 검증된 자료인지를 체크할 수 있습니다. 명세에는 낯선 내용들이 많아 이해하기가 어려울 수 있지만 보기 어렵더라도 블로그 글보다는 최신 명세를 확인하며 학습하며 내 것으로 만들어가야합니다.
▶ECMA 명세

2. 실행컨텍스트

2-1 실행컨텍스트 개념

실행 컨텍스트를 한 줄로 요약하면, JavaScript가 실행되는 방식을 담고 있는 핵심 원리입니다. 조금 더 풀어서 기술적으로 설명을 한다면 JavaScript엔진이 코드를 읽고 실행에 필요한 정보를 종류, 단계에 따라 나눠 모아놓는 것입니다.

2-2 실행컨텍스트의 종류

실행 컨텍스트의 종류로는 Global,Function,Eval 세 가지가 있습니다. Eval은 현재 사용되지 않기에 실행컨텍스트의 종류 중 하나로 실행컨텍스트는 총 3가지가 있지만 크게 실행컨텍스트는 전역 컨텍스트와 함수 컨텍스트로 분류해 놓는다고 이해해도 좋습니다.

• Global : 전역(GEC)

  this, 객체, 변수선언이 바인딩되는 값들을 가지고 있습니다.

• Function : 함수(FEC)

  함수 컨텍스트는 상위 컨텍스트에 접근을 할 수 있습니다. 함수의 this, 매개변수, arguments의 컨텍스트를 가지고 있습니다.

• Eval : eval 메서드

2-2 실행컨텍스트의 단계

자바스크립트 엔진 관점에서 실행컨텍스트가 실행하는 단계가 있습니다.

• Creation Phase (생성 단계): JS엔진이 함수를 호출했지만 실행이 시작되지 않은 단계

• Execution Phase (실행 단계): 전역 변수의 값 할당이 발생하며 코드를 실행하는 단계

2-3 호이스팅 예시

var name = '0seo8'

function hello() {
  console.log(this.name)
  console.log(name)
}

현재 코드는 아직 함수를 호출하지 않았기 때문에 생성단계에 있습니다. 코드의 생성 단계는 아래와 같습니다.

1. 전역 객체 생성
2. 변수 생성
3. 변수는 undefined로 초기화
4. hello 함수는 메모리에 위치

아직 hello함수가 실행되지 않았기 때문에 생성단계에서 hello함수는 전역객체 어딘가에 위치를 하게 됩니다.

hello()

다음은 실행단계를 확인해보도록 하겠습니다.

1. 함수 호출 시 함수 실행 컨텍스트 생성
2. argumnets 접근 가능한 환경 생성
3. GEC에서 생성된 환경에 접근 가능
4. 만약 함수가 다른 함수 호출 시 새로운 함수의 실행컨텍스트 생성되며 반복(스코프체인 유발)

아직은 이해하기 어려울 수 있지만 반복해서 확인을 하고 찾아보며 익숙해지는 것을 권장드립니다.