자바스크립트 코드(함수)가 실행되는 과정

• 자바스크립트 엔진은 코드가 없어도 3개의 변수(this, 변수들, 스코프 체인)를 포함해 실행 환경(실행 컨텍스트)를 초기화한다. → 전역 실행 컨텍스트 (Global Execution Context)
• 스코프는 코드가 현재 실행되는 환경, 맥락(context)를 의미하며, this 포인터, 스코프에 저장된 변수들(variable objects), 스코프 체인 등이 환경에 포함된다.
• this 포인터란 레퍼런스 변수이며, 글로벌 스코프(=최상위 스코프)에서는 window를 가리킨다.
• 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트를 생성한다.
• 실행 컨텍스트는 생성, 실행 두 단계를 통해 생성된다.
• 생성 단계에서 자바스크립트 엔진은 변수 선언을 읽고, 실행 단계(런타임)에서 자바스크립트 엔진은 변수 값을 할당한다.

생성 단계와 실행 단계

생성 단계에서의 코드 실행

• 자바스크립트 엔진은 생성 단계에서 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다.
• 변수의 경우, 실행 컨텍스트의 렉시컬 환경을 구성한다. 렉시컬 환경에는 변수, 스코프 체인, this가 포함된다.
• 변수는 생성 단계에선 값이 저장되지 않지만, 함수 선언문은 생성 단계에서부터 값이 저장된다.
• 이 때 var변수는 undefined로 초기화되지만, let과 const는 선언되기 전에는 사용할 수 없기 때문에(=일시적 사각지대 TDZ) 생성 단계에서 초기화 될 수 없다. let과 const는 TDZ를 벗어나면(실행 단계에서 선언이 실행되면) 초기화가 이루어지며 변수가 할당한 값이 메모리에 저장된다.

실행 단계에서의 코드 실행

• 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장한다. (값 할당 구문을 만나기 전까진 var는 undefined, let, const는 uninitialized)

예시

1. 예시 코드 가장 처음 단계
   → 전역 실행 컨텍스트 (Global Execution Context)
   

2. myFunc() 함수가 실행되며 새롭게 만들어진 실행 컨텍스트
   → 함수 실행 컨텍스트 (Function Execution Context)
   

1. myFunc()안의 add()함수가 실행되며 새롭게 만들어진 실행 컨텍스트
   → 함수 실행 컨텍스트 (Function Execution Context)
   

이렇게 실행 구조가 쌓이는 것을 call stack이라고 하며, 실행되는 컨텍스트는 이전 컨텍스트 위로 쌓인다. 호출되는 순서에 따라 스택에 쌓이고, 나중에 쌓여진 함수부터 실행된다.

따라서 위의 예제를 실제 쌓인 모습으로 표현하면

[3]

[2]

[1]

이다.

• 함수가 실행되면, 함수 스코프에 따라 환경이 만들어진다.
• 스코프 체인을 따라 글로벌 환경에 도달한다.
• 객체의 메서드의 경우, 메서드 환경의 this는 해당 객체를 가리키게 된다. 하지만 환경에 따라 this가 가리키는 것은 변할 수 있다.
• 전역에 존재하는 코드는 함수나 클래스 내부의 코드를 무시하고 컨텍스트를 가진다. 함수에 존재하는 코드는 함수 내부에서만 컨텍스트를 가진다.

렉시컬 환경

• 렉시컬 환경은 식별자와 식별자에 연결된 값을 저장하는 자료구조이다.
• 함수의 렉시컬 환경은 함수가 사용하는 변수들을 둘러싼 환경을 의미한다.
• 특정 변수의 값은 함수의 렉시컬 환경 안에서 찾을 수 있다.
• 렉시컬 환경은 실행 컨텍스트 안에 정의된 Variable Object로 이해할 수 있다.

<예제>

const myName = "Elice";

function Coder() {
  const title = "Coder Land";
  return title;
}

전역으로 생성되는 렉시컬 환경에서는 myName, Coder 이렇게 2개의 식별자와 식별자에 연결된 값이 저장된다. myName에는 Elice가 들어있지만, Coder에는 스코프 체인으로 Coder와 연결되어 있다.

그리고 Coder 함수의 렉시컬 환경에서는 title이라는 1개의 식별자와 식별자에 연결된 값이 저장된다. 또한, 전역 렉시컬 환경에 스코프 체인으로 연결되어 있다. 전역에서는 Coder라는 정보를 갖고 있기 때문이다.

*이미지 출처 : 엘리스 코딩