[JavaScript] Closure 란?

JavaScript에서 클로저(Closure)란?

클로저(Closure)는 함수가 자신이 선언된 렉시컬 환경(Lexical Environment)을 기억하고, 그 환경에 접근할 수 있는 기능을 의미합니다. 즉, 내부 함수가 외부 함수의 변수에 접근할 수 있으며, 외부 함수 실행이 끝난 후에도 변수의 값을 유지할 수 있습니다.

클로저의 기본 개념

함수 내부에서 선언된 함수

클로저는 보통 함수 내부에서 정의된 또 다른 함수로 구성됩니다. 내부 함수는 외부 함수의 변수를 참조할 수 있으며, 외부 함수 실행이 종료된 후에도 변수의 값을 유지합니다.

예제 코드

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const newFunction = outerFunction('Hello');
newFunction('World'); // Outer Variable: Hello, Inner Variable: World

---

클로저의 활용 사례

데이터 은닉 (Encapsulation)

클로저를 활용하면 외부에서 직접 접근할 수 없는 변수를 만들고, 특정 함수만이 이를 조작할 수 있도록 할 수 있습니다.

function counter() {
    let count = 0;
    return {
        increment: function () {
            count++;
            console.log(count);
        },
        decrement: function () {
            count--;
            console.log(count);
        }
    };
}

const myCounter = counter();

myCounter.increment(); // 1
myCounter.increment(); // 2
myCounter.decrement(); // 1

이벤트 리스너와 클로저

클로저는 이벤트 핸들러에서도 유용하게 사용됩니다. 예를 들어, 버튼을 클릭할 때 특정 값을 유지하고 싶을 때 사용할 수 있습니다.

function attachClickEvent(buttonId) {
    let count = 0;
    document.getElementById(buttonId).addEventListener('click', function () {
        count++;
        console.log(`Button clicked ${count} times`);
    });
}
attachClickEvent('myButton');

closure 를 사용하여 memoize 구현하기

closure를 사용하여 memoize 함수 안에 캐시 기능을 하는 map 객체를 구현하여 동일한 인자값을 들어오는 경우 불필요한 연산 처리 없이 바로 값을 리턴하도록 구현

const memoize = (func) => {
    const cache = new Map();
    return (x) => {
        if (cache.has(x)) {
            console.log('캐시에서 가져옴');
        }

        const result = func(x);
        cache.set(x, result);
        
        return result;
    }
}

---

클로저의 주의점

• 메모리 관리
  클로저는 외부 함수의 변수를 유지하기 때문에 불필요한 메모리 사용을 초래할 수 있습니다. 따라서, 사용이 끝난 클로저는 참조를 제거하여 가비지 컬렉션이 가능하도록 해야 합니다.
• 성능 이슈
  클로저가 너무 많아지면 성능 저하를 유발할 수 있으므로, 필요할 때만 사용하도록 주의해야 합니다.