13. 실행 컨텍스트(Execution Context)와 스코프(Scope) - 1

실행 컨텍스트의 개념과 구성 요소

JavaScript에서 코드가 실행될 때 생성되는 실행 환경인 "실행 컨텍스트"는 JavaScript 엔진이 코드를 실행하는 방식을 이해하는 데 중요한 개념입니다. 실행 컨텍스트는 코드가 실행될 때 변수, 함수 선언 등의 정보를 담고 있으며, 스코프 체인과 클로저의 동작에 영향을 줍니다.

1. 실행 컨텍스트의 개념

실행 컨텍스트는 코드가 실행되는 환경을 추상화한 것으로, 코드가 실행될 때 생성되고 관리됩니다. 실행 컨텍스트에는 코드가 실행되는 동안 필요한 정보들이 담겨 있습니다. 이 정보에는 변수, 함수 선언, 매개변수 등이 포함됩니다.

2. 실행 컨텍스트의 구성 요소

실행 컨텍스트는 크게 세 가지 요소로 구성됩니다.

• Variable Object(변수 객체): 현재 컨텍스트에서 사용 가능한 변수, 함수 선언 등의 정보를 담고 있는 객체입니다.
• Scope Chain(스코프 체인): 현재 컨텍스트의 변수 객체와 상위 컨텍스트의 변수 객체들을 연결한 체인입니다. 이를 통해 변수 및 함수에 접근할 수 있습니다.
• This value(함수 호출 시 this 키워드가 바인딩되는 값): this 키워드가 가리키는 값입니다. 함수가 호출될 때 결정됩니다.

아래는 실행 컨텍스트의 구성 요소를 보여주는 간단한 코드 예제입니다.

// 전역 컨텍스트(Global Execution Context)
var globalVariable = 'Global Variable';

function outerFunction(outerParameter) {
  // outerFunction 컨텍스트
  var outerVariable = 'Outer Variable';
  
  function innerFunction(innerParameter) {
    // innerFunction 컨텍스트
    var innerVariable = 'Inner Variable';
    
    console.log(globalVariable); // 전역 변수 접근
    console.log(outerParameter); // 외부 함수의 매개변수 접근
    console.log(outerVariable); // 외부 함수 내 변수 접근
    console.log(innerParameter); // 내부 함수의 매개변수 접근
    console.log(innerVariable); // 내부 함수 내 변수 접근
  }
  
  innerFunction('Inner Parameter');
}

outerFunction('Outer Parameter');

 

이 코드에서는 전역 컨텍스트와 outerFunction 내부의 컨텍스트, 그리고 innerFunction 내부의 컨텍스트가 순차적으로 생성됩니다. 해당 컨텍스트들은 서로 스코프 체인을 통해 변수 및 함수에 접근할 수 있습니다.