[JS]클로저(Closure)

클로저란🤔

MDN에서는 다음과 같이 정의했다

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
(클로저는 주변상태(렉시컬 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합이다.)

 

사실 말이 어려워서, 코어 자바스크립트에서 정의한 말이 더 쉽게 와닿는다.

어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우,
함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상

 

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10

• 클로저는 함수가 선언될 때의 스코프(환경)를 기억
  => 함수가 호출되는 위치와 상관없이 원래의 스코프에 있는 변수에 접근 가능
• 데이터 은닉이 가능
• 해당 환경의 변수 값을 기억하고 변경할 수 있음
• 여러 개의 독립적인 상태를 가진 함수 인스턴스를 만들 수 있음
• 해당 스코프의 변수를 참조하기 때문에, 참조가 해제되지 않는 한 메모리에 남아 있음
  => 메모리 누수가 발생할 수 있으므로 주의가 필요
• 이벤트 핸들러에서 유용하게 사용되며, 특정 변수의 값을 기억할 수 있음
  => 동적인 데이터를 처리할 수 있음

function createBankAccount() {
    let balance = 0; // 비공식적인 데이터

    return {
        deposit(amount) {
            if (amount > 0) {
                balance += amount; // 클로저를 통해 balance에 접근
            }
        },
        withdraw(amount) {
            if (amount > 0 && amount <= balance) {
                balance -= amount;
            }
        },
        getBalance() {
            return balance; // 현재 잔고 반환
        }
    };
}

const account = createBankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100
account.withdraw(50);
console.log(account.getBalance()); // 50

 

🌟더는 사용하지 않게 된 클로저에 대해서는 메모리를 차지하지 않도록 관리해줄 필요가 있음! 🌟

 

[mdn 공식문서]

Closures - JavaScript | MDN