2주차_김현중_회고록_part 2 - hyeone999/Docs-JS_deepDive_Study GitHub Wiki

✅ 학습한 내용

이번 주는 자바스크립트의 핵심 실행 구조인 **실행 컨텍스트(Execution Context)**와
자바스크립트의 강력한 기능 중 하나인 **클로저(Closure)**에 대해 학습했습니다.

📌 1. 실행 컨텍스트 (Execution Context)

  • 실행 컨텍스트는 **코드가 실행되는 환경(context)**을 의미합니다.
  • JS 엔진이 코드를 실행하기 전, 변수, 함수 선언 등을 등록하고 초기화하는 과정이 실행 컨텍스트를 통해 이루어짐.
  • 구성요소:
    • LexicalEnvironment (렉시컬 환경)
    • VariableEnvironment (변수 환경, ES6 이후 대부분 Lexical과 동일하게 처리됨)
    • ThisBinding (this 값 바인딩)
  • 실행 컨텍스트는 콜 스택(Stack) 구조로 관리되며, 함수가 호출될 때마다 새로운 컨텍스트가 생성되고, 종료되면 pop 됨.
function outer() {
  let a = 10;
  function inner() {
    let b = 20;
    console.log(a + b); // 실행 컨텍스트: inner → outer
  }
  inner();
}
outer();

📌 2. 렉시컬 환경 (Lexical Environment)

  • 코드가 작성된 위치(정적 스코프) 를 기준으로 변수를 탐색하는 환경.
  • 렉시컬 환경은 다음 두 가지로 구성됨:
  1. 환경 레코드(Environment Record): 실제 변수/함수 식별자 저장소
  2. 외부 렉시컬 환경 참조: 상위 스코프에 대한 참조
  • 대부분의 변수 탐색, 클로저 동작은 이 렉시컬 환경 기준으로 결정됨.

📌 3. 클로저 (Closure)

  • 클로저는 함수가 선언될 당시의 외부 변수 정보를 기억하여, 함수가 호출될 때 그 외부 변수에 접근할 수 있는 개념입니다.
  • 외부 함수가 종료되더라도, 내부 함수가 외부 변수에 접근할 수 있음
function makeCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// count는 외부 함수 makeCounter가 종료되어도 내부 함수에서 접근 가능, 이를 통해 정보 은닉(캡슐화)도 가능.

📝 4.포인트

  • 실행 컨텍스트는 콜스택에 쌓이며, 함수마다 하나씩 생성
  • 렉시컬 환경은 “코드 작성 위치” 기준으로 변수 탐색
  • 클로저는 렉시컬 환경을 기억하는 함수
  • 클로저를 활용하면 데이터 은닉, 상태 유지, 함수형 프로그래밍 구현이 가능함