본문 바로가기
javascript pure/javascript 코어 개념

2. 클로저(Closures) - 2

by leo2114 2024. 2. 14.
반응형

클로저의 활용 예시와 실제 사용 사례

클로저(Closure)는 자바스크립트에서 매우 유용한 개념으로, 다양한 상황에서 활용될 수 있습니다. 이번 섹션에서는 클로저의 활용 예시와 실제 사용 사례를 알아보겠습니다.

1. 비동기 작업과 콜백 함수

클로저를 사용하여 비동기 작업에서 콜백 함수를 정의할 수 있습니다. 예를 들어, setTimeout 함수를 사용하여 일정 시간 후에 특정 작업을 수행하는 경우 클로저를 사용하여 외부 변수에 접근할 수 있습니다.

function delayedExecution() {
    var message = "Hello, world!";
    setTimeout(function() {
        console.log(message); // 클로저를 통해 외부 변수에 접근
    }, 1000);
}
delayedExecution();

2. 프라이빗 변수 구현

클로저를 사용하여 프라이빗 변수를 구현할 수 있습니다. 함수 내부에서 변수를 선언하고 반환된 내부 함수를 통해서만 접근할 수 있도록 할 수 있습니다.

function counter() {
    var count = 0; // 프라이빗 변수
    return function() {
        count++;
        console.log(count);
    };
}
var increment = counter();
increment(); // 1
increment(); // 2

3. 모듈 패턴

클로저를 사용하여 모듈 패턴을 구현할 수 있습니다. 모듈 패턴은 코드를 구조화하고 캡슐화하여 코드의 가독성과 유지보수성을 높일 수 있는 패턴입니다.

var module = (function() {
    var privateVariable = "I am private!";
    return {
        publicFunction: function() {
            console.log(privateVariable);
        }
    };
})();
module.publicFunction(); // "I am private!"

4. 반복문에서의 클로저 활용

클로저를 사용하여 반복문 내에서 비동기 작업을 처리할 때 유용하게 활용될 수 있습니다. 반복문 내에서 클로저를 사용하여 각 반복마다 다른 변수 값을 참조하도록 구현할 수 있습니다.

for (var i = 1; i <= 5; i++) {
    (function(index) {
        setTimeout(function() {
            console.log(index);
        }, 1000 * index);
    })(i);
}

5. 메모리 누수 방지

클로저를 사용할 때 주의해야 할 점은 메모리 누수입니다. 클로저 내부에서 외부 변수에 대한 참조를 유지하면 해당 변수는 가비지 컬렉션의 대상이 되지 않아 메모리에 계속 남아있을 수 있습니다. 이를 방지하기 위해서는 클로저 내부에서 외부 변수에 대한 불필요한 참조를 해제해 주어야 합니다.

6. 결론

클로저는 자바스크립트에서 다양한 상황에서 활용될 수 있는 강력한 기능입니다. 비동기 작업, 프라이빗 변수 구현, 모듈 패턴 등 다양한 예시를 통해 클로저의 활용 방법을 익히고, 메모리 누수에 주의하여 적절히 활용하는 것이 중요합니다.

반응형