JavaScript 클로저 함수에서 변수 값을 보존하는 방법

JavaScript 클로저에서 변수 값 보존하기

JavaScript 클로저(closure) 함수 내부의 변수를 보존하려면, 함수가 호출될 때마다 해당 변수를 빈 값으로 초기화해서는 안 됩니다. 변수를 매번 초기화하면 이전에 저장한 값이 모두 사라지기 때문입니다.

문제가 되는 코드

예를 들어 아래처럼 작성하면, 함수가 호출될 때마다 webLinks 객체가 빈 객체로 덮어써지면서 기존 값이 유지되지 않습니다.

webLinks = {};

클로저로 변수 값을 유지하는 방법

변수를 보존하려면 즉시 실행 함수(IIFE)와 클로저를 함께 활용해야 합니다. 외부 함수의 지역 변수는 내부 함수가 참조하는 동안 메모리에 유지되므로, 반환된 내부 함수를 여러 번 호출해도 webLinks 객체에 저장된 값이 그대로 남아 있습니다.

var webLink = (function () {
    var link1 = "https://www.qries.com",
        link2 = "https://www.tutorialspoint.com";
    var webLinks = {};
    return function (id) {
        webLinks[id] = "My " + id;
        console.log(webLinks);
    };
})();

webLink("qries");  // { qries: "My qries" }
webLink("tsp");    // { qries: "My qries", tsp: "My tsp" }

동작 원리

위 코드에서 webLinks 변수는 즉시 실행 함수 내부에 선언되어 있으며, 반환된 내부 함수가 이 변수를 참조합니다. 클로저의 특성상 내부 함수가 살아 있는 한 외부 함수의 지역 변수도 소멸하지 않기 때문에, 함수를 호출할 때마다 새로운 데이터가 기존 객체에 계속 누적됩니다.

정리하면, 클로저 내부에서 변수를 보존하는 핵심은 다음과 같습니다.

• 초기화 코드(webLinks = {})를 함수 호출 시마다 실행하지 않고, 한 번만 실행되는 외부 스코프에 배치합니다.
• 내부 함수가 외부 변수를 참조하도록 하여 클로저를 형성합니다.
• 이렇게 하면 함수 호출이 반복되어도 변수의 상태가 그대로 유지됩니다.