Closure란?

 

클로저(Closure)는 자바스크립트의 함수가 자신이 선언된 위치의 환경(Scope)을 기억하는 특성을 말한다. 이 특성 덕분에, 함수 내부에 정의된 내부 함수(Inner Function)는 외부 함수(Outer Function)의 변수와 환경에 접근할 수 있다. 외부 함수가 실행을 완료하더라도 내부 함수는 외부 함수의 변수와 환경을 유지한다.

---

특징

1. 내부 함수는 외부 함수의 변수에 접근 가능:
   • 외부 함수가 실행을 끝낸 뒤에도 내부 함수는 외부 함수의 변수와 상태를 기억한다.
2. 변수의 유효 범위를 확장:
   • 클로저는 함수가 호출될 때마다 독립적인 환경을 생성하므로 변수 상태를 유지하거나 보호할 수 있다.

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('Outer Variable:', outerVariable); // 외부 함수의 변수 접근
        console.log('Inner Variable:', innerVariable); // 내부 함수의 매개변수 접근
    };
}

// 외부 함수 호출: 'outside'를 매개변수로 전달
const newFunction = outerFunction('outside');

// 내부 함수 호출: 'inside'를 매개변수로 전달
newFunction('inside');

Outer Variable: outside
Inner Variable: inside

작동 원리

1. outerFunction이 실행되면서 outerVariable이라는 변수를 생성한다.
2. innerFunction은 외부 함수인 outerFunction의 변수(outerVariable)에 접근할 수 있다.
3. outerFunction이 반환한 innerFunction은 외부 함수의 실행이 끝난 뒤에도 outerVariable에 접근할 수 있는 "환경"을 기억한다.
4. 결과적으로, newFunction은 outerVariable의 값을 계속 참조할 수 있다.

---

클로저의 장점

1. 데이터 캡슐화: 외부에서 접근할 수 없는 "비공개 변수"를 만들 수 있다.
   • 클로저를 이용하면 데이터를 은닉하고, 외부에서 직접 접근할 수 없도록 보호할 수 있다.

function counter() {
    let count = 0; // 은닉된 변수
    return function () {
        count++;
        console.log('Count:', count);
    };
}

const increment = counter();
increment(); // Count: 1
increment(); // Count: 2

 

 

상태 유지: 함수가 호출될 때마다 독립적인 환경을 생성하여 상태를 관리할 수 있다.

---

주의할 점

1. 클로저를 무분별하게 사용하면 메모리 누수가 발생할 수 있다.
   • 클로저는 참조를 유지하기 때문에 사용이 끝난 클로저는 명시적으로 제거해야 한다.
2. 성능 이슈:
   • 클로저는 외부 변수를 계속 참조하므로 실행 시 약간의 성능 오버헤드가 발생할 수 있다