본문으로 건너뛰기

실행 컨텍스트

· 약 3분
준열
준열
프론트엔드 개발자

코어 자바스크립트 스터디 3주차 내용을 정리했습니다. 이번 주제는 실행 컨텍스트입니다.

📚 실행 컨텍스트란?​

실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다.

정의: 실행 컨텍스트란 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행결과를 실제로 관리하는 영역입니다.

🔄 실행 컨텍스트의 동작 원리​

동일한 조건/환경을 지니는 코드 뭉치가 있을 때, 이 조건/환경 정보를 모아 컨텍스트를 구성하고 이를 **콜스택(call stack)**에 쌓아둡니다.

자바스크립트에서 동일한 환경을 가질 수 있는 소스코드 타입:​

  1. 전역 공간
  2. 함수 내부
  3. 블록 내부 (ES6+)
  4. eval 내부 (거의 사용하지 않음)

참고: eval은 여러 가지 문제를 야기하는 위험한 명령어로 거의 다루지 않아 보통 논외로 합니다.

결론: 자바스크립트에서 동일한 환경을 가질 수 있는 것은 함수 뿐입니다. 함수에 의해서만 컨텍스트를 구분할 수 있습니다.

정리: 실행 컨텍스트는 **'함수를 실행할 때 필요한 환경 정보를 담은 객체'**입니다.

📚 콜스택 (Call Stack)​

콜스택(call stack, 호출스택)이란 현재 어떤 함수가 동작 중인지, 다음에 어떤 함수가 호출될 예정인지 등을 제어하는 자료구조입니다.

실행 예제​

var a = 1;
function outer() {
  console.log(a); // ----------- 실행순서 1
  function inner() {
    console.log(a); // --------- 2
    var a = 3;
  }
  inner();
  console.log(a); // ----------- 3
}
outer();
console.log(a); // ------------- 4

실행 과정:​

  1. 전역 컨텍스트가 열리고, 전역공간을 한 줄 한 줄 실행
  2. outer() 함수 호출 → outer()에 대한 실행 컨텍스트가 열리고, 내부를 한 줄 한 줄 실행
  3. inner() 함수 호출 → inner()에 대한 실행 컨텍스트가 열리고, 내부를 한 줄 한 줄 실행
  4. inner() → outer() → 전역까지 순서대로 종료

실행 결과:​

1
undefined
1
1

결과 설명:​

  • inner() 함수에서 var a = 3;의 선언 부분만 호이스팅되어 undefined 값을 가짐

🗂️ 실행 컨텍스트의 구성 요소​

어떤 실행 컨텍스트가 콜스택의 맨 위에 쌓이는 순간(활성화될 때, running execution context), 실행 컨텍스트의 내부에는 3가지의 환경 정보가 저장됩니다:

  1. Variable Environment
  2. Lexical Environment
  3. This Binding

Variable Environment와 Lexical Environment는 변경 사항의 반영 여부의 차이이므로, 실시간 반영의 Lexical Environment를 위주로 살펴봅니다.

🗃️ Lexical Environment (렉시컬 환경)​

직역하면 어휘적/사전적 환경을 의미하며, **'실행 컨텍스트를 구성하는 환경 정보들을 모아 마치 사전처럼 구성한 객체'**입니다.

"현재 컨텍스트 내부에는 a, b와 같은 식별자들이 있고, 그 외부 정보는 D를 참조하도록 구성되어 있다"와 같은 느낌입니다.

Lexical Environment의 구성​

  1. environmentRecord
  2. outerEnvironmentReference

🏷️ environmentRecord​

environmentRecord에는 현재 컨텍스트의 식별자 정보가 저장됩니다.

이는 실행 컨텍스트가 최초 실행될 때 제일 먼저 하는 일입니다.

호이스팅 (Hoisting)​

현재 컨텍스트 식별자 정보를 수집해서 environmentRecord에 담는 과정, 이를 **호이스팅(hoisting)**이라고 합니다.

호이스팅의 정의: 런타임에 앞서 소스코드를 실행하기 위한 준비 과정으로 선언문만 먼저 실행하는 것입니다.

중요: 코드의 최상단으로 끌어올려지는 실제 현상이 아닌, environmentRecord를 좀 더 쉽게 이해하기 위해서 만든 허구의 개념으로 이해하는 것이 좋습니다.

🔗 outerEnvironmentReference​

outerEnvironmentReference에는 현재 컨텍스트와 관련이 있는 외부 컨텍스트의 식별자 정보가 저장됩니다.

스코프 체인 (Scope Chain)​

outerEnvironmentReference는 스코프 체인을 가능하게 하는 핵심 요소입니다.

스코프: 식별자에 대한 유효범위 스코프 체인: 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것

🎯 실행 컨텍스트의 핵심 개념들​

1. 콜스택​

  • 실행 컨텍스트가 쌓이는 자료구조
  • LIFO(Last In, First Out) 방식으로 동작

2. 렉시컬 환경​

  • 현재 컨텍스트의 식별자 정보 저장
  • 외부 환경에 대한 참조 정보 포함

3. 호이스팅​

  • 변수 및 함수 선언이 스코프 최상단으로 끌어올려지는 것처럼 동작
  • 실제로는 environmentRecord에 미리 수집되는 과정

4. 스코프 체인​

  • 식별자를 찾기 위해 현재 스코프부터 상위 스코프로 순차 검색
  • outerEnvironmentReference를 통해 구현

📝 정리​

  • 실행 컨텍스트는 코드 실행에 필요한 환경 정보를 관리하는 객체
  • 콜스택을 통해 함수 호출 순서를 관리
  • 호이스팅은 선언문을 미리 수집하는 과정
  • 스코프 체인으로 변수의 유효범위를 결정
  • 렉시컬 환경이 식별자와 외부 참조 정보를 담당

스터디: 코어 자바스크립트 3주차