Published on

실행 컨텍스트

Authors
  • avatar
    Name
    junyeol kim

코어 자바스크립트 스터디 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주차

Previous

실행 컨텍스트와 불변 객체

Next

함수 선언문과 함수 표현식