[Javascript] 클로저(Closure)란?

클로저(Closure)는 JavaScript에서 중요한 개념 중 하나로, 함수를 이해하고 효율적으로 사용하는 데 필수적입니다. 클로저는 함수가 선언될 당시의 스코프(scope)를 기억하고, 그 스코프 밖에서 호출될 때에도 해당 스코프에 접근할 수 있게 하는 기능을 제공합니다.

클로저 개념

클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능입니다. 함수가 선언된 시점의 환경(렉시컬 환경)을 기억하고, 외부 함수가 종료된 후에도 내부 함수에서 외부 함수의 변수에 접근할 수 있게 됩니다. 이렇게 함수가 자신이 선언된 환경을 기억하는 특성을 "클로저"라고 합니다.

예시)

function outerFunction() {
    let outerVariable = 'A';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // "A"

클로저 활용 예제

1. 데이터 은닉

클로저를 사용하여 함수 외부에서 접근할 수 없는 비공개 변수를 만들 수 있습니다. 이는 캡슐화(encapsulation)를 가능하게 해주며, 외부에서 직접 접근할 수 없는 데이터 저장소 역할을 할 수 있습니다.

예시)

function createCounter() {
    let count = 0;

    return function() {
        count++;
        return count;
    };
}

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

2. 함수 팩토리(Function Factory)

클로저는 특정 로직을 캡슐화하여 함수 팩토리처럼 사용할 때도 유용합니다. 예를 들어, 여러 배수를 구하는 함수를 만들 때 클로저를 사용할 수 있습니다.

예시)

function createMultiplier(multiplier) {
    return function (number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

3. 타이머 및 비동기 함수에서의 클로저

JavaScript의 비동기 작업에서 클로저를 사용해 특정 상태를 유지할 수 있습니다

예시)

function greetAfterDelay(name) {
    setTimeout(function() {
        console.log(`${name}!`);
    }, 1000);
}

greetAfterDelay('myungju'); // 1초 후 "myungju"

주의할점

클로저로 인한 메모리 누수

클로저는 특정 변수를 지속적으로 유지하기 때문에, 잘못 사용하면 메모리 누수가 발생할 수 있습니다. 특히 많은 데이터를 참조하는 클로저를 남용하면 메모리를 낭비하게 되므로, 클로저를 사용할 때는 주의가 필요합니다.