실행 컨텍스트(Execution Context)

답변 확인

• 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미합니다.
• 변수, 함수, 스코프,this 등의 정보를 관리하여 코드 실행 시의 동작을 정의 자바스크립트 엔진은 실행 컨텍스트를 생성하여 코드의 실행 순서를 제어하고 스코프 체인을 관리함

1. 실행 컨텍스트 종류

실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 나뉨

1. 전역 실행 컨텍스트 (Global Execution Context):

• 특징 : 자바스크립트가 처음 실행될 때 생성, 프로그램 종료 시까지 유지
• 포함 요소 :
  • 전역 변수와 함수
  • 전역 객체(window 또는 globalThis)
• 특성 : 프로그램 내 어디서나 접근 가능

var a = 10; // 전역 변수
function greet() {
  console.log('Hello');
}

2. 함수 실행 컨텍스트 (Function Execution Context):

• 특징 : 함수가 호출될 때 마다 생성, 함수 실행이 끝나면 소멸
• 포함 요소:
  • 함수 내부의 변수, 매개 변수, 내부 함수
  • 함수의 렉시컬 환경
• 특성 : 함수 내부에서만 유효한 스코프와 데이터를 가짐

function add(a, b) {
  var sum = a + b; // 함수 내부 변수
  return sum;
}
add(2, 3); // 함수 실행 시 컨텍스트 생성

3. Eval 실행 컨텍스트

• 특징 eval() 함수가 호출될 때 생성되는 컨텍스트
• 보안 문제로 인해 사용이 권장되지 않음

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

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

1. 변수 환경

• 변수와 함수 선언을 저장
• 전역 컨텍스트에서는 전역 객체가, 함수 컨텍스트에서는 지역 변수가 관리됨

2. 렉시컬 환경

• 현재 스코프와 외부 스코프(스코프 체인)를 연결하여 변수 참조를 처리

3. this 바인딩

• 실행 컨텍스트에 따라 this가 참조하는 객체가 결정
  • 전역 컨텍스트 : 전역 객체(window)
  • 함수 컨텍스트 : 함수 호출 방식에 따라 결정

3.실행 컨텍스트 동작

1. 생성 단계 :

• 변수와 함수 선언이 메모리에 등록
• var는 undefined로 초기화, let과const는 초기화되지 않은 상태(TDZ)

2. 실행 단계 :

• 변수 값 할당, 연산 수행, 함수 호출 등 실제 코드 실행

4. 호이스팅과 실행 컨텍스트

• 호이스팅 : 실행 컨텍스트 생성 단계에서 변수와 함수 선언이 메모리에 미리 저장되는 현상

console.log(a); // undefined (호이스팅 발생)
var a = 5;
 
console.log(b); // ReferenceError
let b = 10;

5. 실행 컨텍스트와 클로저

• 클로저 : 함수가 종료된 후에도 외부 스코프의 변수에 접근할 수 있는 현상

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
 
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

예제

1. 전역 컨텍스트와 호이스팅

• 선언 전에 변수를 참조하면 undefined가 반환

console.log(globalVar); // undefined
var globalVar = 'Hello, World!';

2. 함수 컨텍스트와 스코프 체인

• 변수 참조 시 현재 스코프에서 찾지 못하면, 외부 스코프를 따라가며 변수 탐색

function outer() {
  var outerVar = '외부 변수';
 
  function inner() {
    console.log(outerVar); // 외부 변수 (스코프 체인)
  }
 
  inner();
}
outer();

3. 콜 스택 추적

• result 값(6) 출력
• console.log 실행 후 calculate 컨텍스트 제거

function multiply(a, b) {
  return a * b;
}
 
function calculate() {
  const result = multiply(2, 3);
  console.log(result);
}
 
calculate();

결론

1. 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경으로, 스코프, 변수, this를 관리
2. 호이스팅, 스코프 체인, 클로저 등 자바스크립트의 주요 동작 원리를 이해하는 데 필수적
3. 자바스크립트의 동작 방식과 디버깅 능력을 향상시키는 핵심 개념

참고 자료

https://www.youtube.com/watch?v=EWfujNzSUmw