icon안동민 개발노트

클로저와 실행 컨텍스트

 자바스크립트에서 클로저와 실행 컨텍스트는 언어의 동작을 이해하는 데 핵심적인 개념입니다.

 이 절에서는 이 두 개념의 정의, 동작 원리, 그리고 실제 활용에 대해 자세히 알아보겠습니다.

실행 컨텍스트 (Execution Context)

 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.

 모든 자바스크립트 코드는 실행 컨텍스트 내에서 실행됩니다.

 실행 컨텍스트의 구성 요소

  1. 변수 환경 (Variable Environment) : 변수 선언, 함수 선언 등이 저장됩니다.
  2. 렉시컬 환경 (Lexical Environment) : 변수 환경의 확장으로, 블록 스코프 변수(let, const)를 포함합니다.
  3. This 바인딩 : 현재 컨텍스트에서 this가 참조하는 대상입니다.

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

 1. 생성 단계

  • 변수 환경과 렉시컬 환경이 생성됩니다.
  • 변수와 함수 선언이 메모리에 저장됩니다. (호이스팅)
  • this 값이 결정됩니다.

 2. 실행 단계

  • 코드가 한 줄씩 실행됩니다.
  • 변수에 값이 할당되고 함수가 호출됩니다.

 콜 스택과 실행 컨텍스트

 콜 스택은 실행 컨텍스트를 관리하는 데이터 구조입니다.

  • 전역 컨텍스트가 먼저 스택에 푸시됩니다.
  • 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되어 스택에 푸시됩니다.
  • 함수 실행이 완료되면 해당 컨텍스트는 스택에서 팝됩니다.

 예시

function outer() {
    function inner() {
        console.log('Inner function');
    }
    inner();
}
outer();

 이 코드의 콜 스택 변화

  1. 전역 실행 컨텍스트
  2. 전역 실행 컨텍스트 → outer 실행 컨텍스트
  3. 전역 실행 컨텍스트 → outer 실행 컨텍스트 → inner 실행 컨텍스트
  4. 전역 실행 컨텍스트 → outer 실행 컨텍스트 (inner 완료)
  5. 전역 실행 컨텍스트 (outer 완료)

클로저 (Closure)

 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다.

 클로저의 동작 원리

 클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해줍니다.

 이는 함수가 생성될 때의 렉시컬 환경을 기억하기 때문입니다.

 예시

function outerFunction(x) {
    return function(y) {
        return x + y;
    };
}
 
const add5 = outerFunction(5);
console.log(add5(3)); // 출력: 8

 이 예시에서 add5는 outerFunction의 x 값을 "기억"하고 있습니다.

 클로저의 활용 사례

  1. 데이터 프라이버시
function createCounter() {
    let count = 0;
    return {
        increment: function() { count++; },
        getCount: function() { return count; }
    };
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
  1. 모듈 패턴
const myModule = (function() {
    let privateVar = 0;
    function privateFunction() {
        console.log('Private function');
    }
    return {
        publicMethod: function() {
            privateVar++;
            privateFunction();
        }
    };
})();
  1. 커링 (Currying)
function multiply(a) {
    return function(b) {
        return a * b;
    };
}
const triple = multiply(3);
console.log(triple(4)); // 12

 클로저와 메모리 관리

 클로저는 외부 함수의 변수를 계속 참조하므로 메모리 누수의 원인이 될 수 있습니다.

 해결 방법

  1. 필요하지 않은 클로저는 null로 설정하여 가비지 컬렉션이 수거할 수 있게 합니다.
  2. 큰 데이터를 다루는 클로저는 사용 후 명시적으로 해제합니다.
let heavyObject = { /* 큰 데이터 */ };
function processData() {
    let result = heavyObject.process();
    // 처리 완료 후
    heavyObject = null; // 메모리 해제
    return result;
}

클로저와 실행 컨텍스트의 중요성

  1. 스코프와 변수 접근 이해 : 클로저와 실행 컨텍스트의 이해는 변수의 스코프와 접근 방식을 명확히 합니다.
  2. 비동기 프로그래밍 : 콜백, 프로미스, async/await 등의 비동기 패턴에서 클로저가 중요한 역할을 합니다.
  3. 함수형 프로그래밍 : 클로저는 고차 함수, 부분 적용, 커링 등 함수형 프로그래밍 기법의 기반이 됩니다.
  4. 모듈화와 캡슐화 : 클로저를 통해 private 변수와 메서드를 구현할 수 있어 모듈화와 캡슐화에 도움이 됩니다.
  5. 성능 최적화 : 실행 컨텍스트와 클로저의 이해는 메모리 사용과 성능 최적화에 중요합니다.

결론

 클로저와 실행 컨텍스트는 자바스크립트의 핵심 메커니즘입니다.

 실행 컨텍스트는 코드 실행의 환경을 제공하고, 클로저는 함수와 그 환경을 결합하여 강력한 프로그래밍 패턴을 가능하게 합니다.

 이 개념들을 깊이 이해하면 다음과 같은 이점이 있습니다.

  • 변수 스코프와 생명주기를 정확히 파악할 수 있습니다.
  • 복잡한 비동기 코드를 더 쉽게 작성하고 이해할 수 있습니다.
  • 메모리 사용을 최적화하고 성능을 향상시킬 수 있습니다.
  • 모듈화되고 유지보수가 용이한 코드를 작성할 수 있습니다.

 클로저와 실행 컨텍스트는 단순히 이론적 개념이 아니라 실제 자바스크립트 프로그래밍에서 매우 실용적인 도구입니다.

 이들을 효과적으로 활용하면 더 강력하고 유연한 코드를 작성할 수 있으며, 자바스크립트의 동작을 더 깊이 이해할 수 있습니다.

 마지막으로, 이 개념들은 자바스크립트 엔진의 내부 동작과 밀접하게 연관되어 있습니다.

 따라서 이를 이해하는 것은 코드 최적화와 디버깅 능력을 크게 향상시킬 수 있습니다.

 클로저와 실행 컨텍스트에 대한 깊은 이해는 자바스크립트 개발자가 언어를 마스터하는 데 필수적인 단계라고 할 수 있습니다.

이전으로다음으로