[Javascript] 클로저(Closure)

함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical Scope)과의 조합

개념

• 함수가 자신이 선언된 환경을 기억하여 함수가 환경 밖에서 실행될 때에도 해당 환경에 접근할 수 있도록 합니다.
• 즉, 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다.
• 또한, 생명 주기가 끝난 외부 함수의 변수에 대한 접근을 제공합니다.

function outerFunc() {
  // 외부 함수의 변수
  var name = "yundogi";

  // 내부 함수
  var innerFunc = function () {
    // 외부 함수의 변수에 접근
    console.log(name); // "yundogi"
  };

  return innerFunc;
}

var inner = outerFunc(); // outerFunc()의 생명 주기 끝
inner(); // "yundogi"

 

어디에 사용할까?

클로저를 활용하는 방법을 아래의 사용자의 잔액을 관리하는 간단한 은행 계좌 시뮬레이터를 통해 설명하겠습니다.

const createAccount = (initial) => {
  let balance = initial;

  return {
    deposit: amount => {
      balance += amount;
      return balance;
    },
    withdraw: amount => {
      if (amount <= balance) {
        balance -= amount;
        return balance;
      }
      return "잔액 부족";
    },
    getBalance: () => balance
  };
};

const account = createAccount(1000);
console.log(account.getBalance());  // 1000
console.log(account.deposit(500));  // 1500
console.log(account.withdraw(200)); // 1300
console.log(account.withdraw(2000)); // "잔액 부족"

1. 은닉화 (like private)

• balance 변수는 클로저를 통해 은닉되어 외부에서 직접 접근할 수 없습니다.
• 외부에서는 오직 반환된 객체의 메서드( deposit, withdraw, getBalance)를 통해서만 balance에 간접적으로 접근하거나 조작할 수 있습니다.

2. 상태 유지

• account와 같은 계좌 객체를 생성한 후에도, 이 객체의 메서드들은 계속해서 balance 변수에 접근하고 수정할 수 있습니다.
• balance 변수는 외부에서 직접 접근할 수 없지만, 클로저 덕분에 계좌 객체의 메서드들을 통해 지속적으로 상태를 유지하고 수정할 수 있습니다.

이와 같은 클로저의 기능 덕분에 의도치 않게 값이 변경될 위험이 있는 전역 변수의 사용을 억제할 수 있습니다.

 

클로저를 이용하여 다음과 같은 문제도 해결할 수 있습니다: 0 ~ 4까지의 숫자를 1초 간격으로 출력하고자 합니다.

function counting() {
    let count = 0;
    for (count = 0; count < 5; count++) {
        setTimeout(function() {
            console.log(count);
        }, count * 1000);
    }
}

counting(); // 5 5 5 5 5

• count가 루프 외부에서 선언되고 각 반복에서 재할당됩니다.
• 모든 콜백 함수가 동일한 count 변수를 참조합니다.
• 루프가 끝나면 count는 5가 됩니다.
• 이로 인해, 모든 타이머는 같은 count(값이 5인)를 참조하여 출력합니다.

클로저를 활용하여 원래 의도대로 코드를 수정할 수 있습니다.

function counting() {
    for (let count = 0; count < 5; count++) {
        setTimeout(function() {
            console.log(count);
        }, count * 1000);
    }
}

counting(); // 0 1 2 3 4

• count가 for 루프 내에서 선언됩니다. 이는 루프의 각 반복마다 새로운 count 변수를 생성합니다.
       (var로 선언할 경우, 호이스팅되어 위의 코드와 동일하게 동작하게 됩니다.)
• setTimeout에 의해 생성된 각 콜백 함수가 각 반복마다 새로 생성된 count를 기억합니다.
• 루프가 끝난 후, 5개의 타이머는 각각 0, 1, 2, 3, 4를 기억하고 있습니다.
• 이로 인해, 각각의 타이머는 각자 기억하고 있던 count( 0, 1, 2, 3, 4 )를 출력합니다.

 

---

 

위의 문제를 IIFE(즉시 실행 함수)로도 해결할 수 있습니다.

function counting() {
    let count = 0;
    for (count = 0; count < 5; count++) {
        (function (number) {
            setTimeout(function() {
                console.log(number);
            }, number * 1000);
        })(count);
    }
}

counting(); // 0 1 2 3 4

 

---

Reference

JavaScript의 클로저(Closure)란? (feat. React의 useState)