JavaScript 실행컨텍스트란?

실행 컨텍스트

자바스크립트 코드가 실행될 때의 환경을 정의하고 관리하는 역할을 합니다.

 

실행컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트가 있습니다.

 

전역 실행 컨텍스트는 자바스크립트가 처음 실행될 때 생성되는 컨텍스트입니다. 이 컨텍스트는 프로그램이 종료될 때까지 유지되며, 전역에 선언된 변수나 함수가 모두 포함됩니다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근이 가능합니다.

(자바스크립트는 싱글 스레드로, 전역 실행 컨텍스트는 1개만 존재)

 

함수 실행 컨텍스트는 함수가 호출될 때마다 생성되는 컨텍스트를 의미합니다. 각 함수는 자신만의 실행 컨텍스트를 가지며, 이 컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효합니다. 함수가 종료되면 그 함수의 실행 컨텍스트도 함께 사라집니다.

 

실행 컨텍스트의 구성요소

실행 컨텍스트는 변수 객체, 스코프 체인, this로 이루어져있습니다.

 

변수 객체란 실행 컨텍스트에서 사용되는 변수와 함수 선언을 저장하는 공간입니다. 전역 컨텍스트에서는 전역 객체가 변수 객체의 역할을 하고, 함수 컨텍스트에스는 활성 객체가 변수와 매개변수를 관리합니다.

 

스코프 체인은 현재 실행중인 컨텍스트와 외부 렉시컬 환경의 연결을 유지합니다. 변수를 참조할 때 현재 컨텍스트에서 찾지 못하면 외부 환경으로 범위를 넓혀가며 변수를 찾습니다.

 

this는 실행 컨텍스트에따라 참조하는 객체가 달라집니다. 전역 컨텍스트에서는 this가 전역 객체를 가리키며, 함수 컨텍스트에서는 함수 호출 방법에따라 달라집니다.

 

렉시컬 스코프

렉시컬 스코프는 코드가 작성된 위치에 따라 결정되는 변수의 접근 범위입니다. 실행시점에따라 달라지지 않고 코드가 작성될 때 정적으로 고정되는 구조입니다.

 

중첩된 구조로 내부 함수는 자신이 선ㅇ언된 외부 함수의 변수에 접근할 수 있으며, 안쪽에서 바깥쪽으로 변수를 찾아가는 단방향 구조입니다.

 

const global = "전역 변수";

function outer() {
  const outerVar = "외부 함수 변수";
  
  function inner() {
    const innerVar = "내부 함수 변수";
    console.log(innerVar);  // 자신의 스코프 변수 접근 (가능)
    console.log(outerVar);  // 외부 함수 스코프 변수 접근 (가능)
    console.log(global);    // 전역 스코프 변수 접근 (가능)
  }
  
  inner();  // inner 함수의 실행 컨텍스트 생성
  // inner가 선언된 렉시컬 스코프(outer 함수 내부)가 스코프 체인에 포함되므로
  // 호출 위치와 상관없이 outer 스코프의 변수인 outerVar에 접근 가능
  console.log(innerVar); // 오류: inner 함수 내부 변수에 접근 불가
}

outer();  // outer 함수의 실행 컨텍스트 생성
console.log(outerVar); // 오류: outer 함수 내부 변수에 접근 불가

 

코드가 실행되면 렉시컬 스코프의 정보를 바탕으로 실행 컨텍스트의 스코프 체인이 구성됩니다.

따라서 inner가 선언된 렉시컬 스코프 (outer 함수 내부)가 스코프 체인에 포함되므로 호출 위치와 관계없이 outer 스코프의 변수인 outerVar에 접근이 가능합니다.