IT/[FE] 위클리 페이퍼

[FE] 📚 자바스크립트 실행 컨텍스트

serin99 2024. 7. 16. 15:59
728x90



🤗 오늘의 위클리 페이퍼는

자바스크립트 실행 컨텍스트(Execution context)에 대한 토픽입니다.

 

 

 

📝 실행 컨텍스트란?


실행 컨텍스트(Execution Context)는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념입니다. 즉, 실행 가능한 소스 코드를 해석하고 실행하기 위해 필요한 환경을 제공하며 코드의 실행 결과를 실제로 관리하는 환경입니다.

 

 

📗 실행 컨텍스트의 개념

 

실행 컨텍스트는 자바스크립트 코드의 실행 환경을 정의하는 객체입니다.

각 실행 컨텍스트는 다음과 같은 정보를 포함합니다

 

  • 변수 객체(Variable Object, VO): 함수 인수(arguments), 변수(variable), 함수 선언문(function declaration) 등을 포함합니다.
  • 스코프 체인(Scope Chain): 해당 컨텍스트가 접근할 수 있는 변수와 함수들을 정의합니다.
  • this 바인딩(this Binding): 현재 실행 중인 코드에서 this 키워드가 참조하는 객체를 가리킵니다.

 

 

📙 실행 컨텍스트의 생성 과정

 

 

자바스크립트 코드는 크게 **전역 컨텍스트(Global Context)**와 **함수 컨텍스트(Function Context)**로 나눌 수 있습니다. 코드가 실행될 때마다 새로운 실행 컨텍스트가 생성됩니다. 생성 과정은 다음과 같습니다:

 

  1. 전역 컨텍스트 생성: 자바스크립트 코드가 처음 실행되면 전역 실행 컨텍스트가 생성됩니다. 전역 컨텍스트는 스크립트가 종료될 때까지 유지됩니다.
  2. 함수 호출 시 함수 컨텍스트 생성: 함수가 호출될 때마다 새로운 함수 실행 컨텍스트가 생성됩니다. 함수가 종료되면 해당 컨텍스트는 사라집니다.

 

 

📘 실행 컨텍스트의 구성 요소

 

 

  • 변수 객체(Variable Object, VO):
    • Activation Object(AO): 함수 실행 컨텍스트에서만 사용되며, arguments 객체를 포함합니다.
    • 전역 객체(Global Object): 전역 실행 컨텍스트에서 사용되며, 전역 변수와 전역 함수를 포함합니다.
  • 스코프 체인(Scope Chain):
    • 현재 실행 컨텍스트와 부모 컨텍스트의 변수 객체들을 참조하는 리스트입니다. 이는 변수의 유효 범위를 결정하며, 스코프 체인을 통해 변수나 함수에 접근할 수 있습니다.
  • this 바인딩(this Binding):
    • 실행 컨텍스트에서 this 키워드가 참조하는 객체를 가리킵니다. 이는 컨텍스트에 따라 달라질 수 있습니다. (예: 전역 컨텍스트에서는 전역 객체를, 함수 컨텍스트에서는 해당 함수 호출 시 정의된 객체를 가리킴)

 


실행 컨텍스트 스택(=실행 스택, ≈콜 스택)


자바스크립트에서 실행 컨텍스트를 추적하기 위해서 실행 컨텍스트 스택을 사용합니다. 실행 컨텍스트 스택은 실행 중에 생성된 모든 컨텍스트들을 저장하는데 Last In, First Out의 스택 자료구조입니다.

자바스크립트 엔진이 스크립트를 처음으로 마주하게 되면 전역 실행 컨텍스트를 생성하여 스택에 푸쉬합니다. 이후 자바스크립트 엔진이 함수 호출을 발견할 때마다 해당 함수에 대한 실행 컨텍스트를 생성하여 스택의 상단에 푸쉬합니다.

스택의 최상단에 있는 실행 컨텍스트의 함수를 실행하고, 함수 실행을 완료하면 스택에서 제거하고 현재 컨텍스트의 아래에 있는 컨텍스트로 컨트롤이 이동합니다.

let a = 'Hello World!';
function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}
function second() {
  console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');


위 코드 예시에 대해 아래 이미지로 실행 컨텍스트 스택 안에 실행 컨텍스트가 생성되고 소멸하는 것을 확인할 수 있습니다.

코드가 브라우저에 로드되면 자바스크립트 엔진은 전역 실행 컨텍스트를 생성하고 현재 실행 스택에 푸쉬합니다. first() 함수가 호출될 때 엔진은 함수에 대한 새로운 실행 컨텍스트를 생성하고 현재 실행 컨텍스트 스택의 상단에 푸쉬합니다.

second() 함수가 first()함수로부터 호출될 때 엔진은 second() 함수에 대한 새로운 실행 컨텍스트를 생성하고 현재 실행 컨텍스트 스택에 푸쉬합니다. sencond() 함수의 동작이 완료되면 함수의 실행 컨텍스트가 현재 스택에서 제거됩니다. 그리고 제거된 실행 컨텍스트 다음 항목인 first()함수 실행 컨텍스트에 도달합니다.

first() 함수가 동작을 완료하면 first() 함수 실행 컨텍스트는 스택에서 제거되고 컨트롤은 전역 실행 컨텍스트에 도달합니다. 모든 코드가 실행되면 Javscript엔진은 전역 실행 컨텍스트를 스택에서 제거합니다.

실행 컨텍스트가 어떻게 생성되고 실행되는지 더 자세하게 알고싶으면 아래 참고 자료를 참고해 주세요.

 

 

 

✅  요약

 

실행 컨텍스트는 자바스크립트가 코드를 실행하는 환경을 정의하는 핵심 개념입니다. 이를 이해하면 변수와 함수의 유효 범위, this 키워드의 동작 방식, 그리고 코드의 실행 순서를 보다 명확하게 이해할 수 있습니다. 이번 글이 자바스크립트 실행 컨텍스트의 개념을 이해하는 데 도움이 되었기를 바랍니다.

728x90