자바스크립트(JavaScript) - 클로저(Closure)와 스코프

클로저의 개념

중첩된 함수에서 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 말합니다.

클로저와 스코프의 관계

클로저는 함수가 선언될 때 렉시컬 스코프에 접근할 수 있도록 하는 메커니즘입니다. 함수가 다른 함수 내에서 정의되고, 그 내부 함수가 외부 함수의 변수에 접근할 때 클로저가 생성됩니다. 클로저를 통해 외부스코프의 변수는 함수가 종료된 이후에도 유지될 수 있습니다.

클로저 활용

Private Variables(프라이빗변수)

function counter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

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

클로저를 사용하면 함수 내에서 선언된 변수가 외부에서 접근되지 않아 해당 변수가 private처럼 동작할 수 있습니다.

Module Patten(모듈 패턴)

const module = (function() {
    let privateVar = 42;

    function privateFunction() {
        console.log('Private Function');
    }

    return {
        publicVar: 10,
        publicFunction: function() {
            console.log('Public Function');
        }
    };
})();

console.log(module.publicVar); // 10
module.publicFunction(); // Public Function

클로저를 활용하여 모듈화된 코드를 작성할 수 있습니다. 모듈 패턴을 사용하면 변수와 함수를 외부에 노출시키지 않고 코드를 구성할 수 있습니다.

Event Handlers(이벤트 헨들러)

function createButton() {
    let count = 0;
    const button = document.createElement('button');
    button.textContent = 'Click me';

    button.addEventListener('click', function() {
        count++;
        console.log(`Button clicked ${count} times`);
    });

    document.body.appendChild(button);
}

createButton();

클로저를 이용하면 이벤트 핸들러에서 외부 변수에 접근할 수 있습니다.