[JavaScript] 클로저

클로저

MDN에서는 클로저(Closure)를 이렇게 정의하고 있다.

클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다.

굉장히 어렵다.

쉽게 생각하면 함수가 외부에 있는 변수들을 기억하는 능력이라고 생각하면 된다.

• 외부 함수는 냉장고라고 생각하고, 냉장고 안에는 여러 음식(변수)이 있다.
• 내부 함수는 그 냉장고 문을 열 수 있는 비밀번호를 아는 사람이라고 생각해보자.
• 냉장고 문이 닫혀도 그 사람(내부 함수)은 여전히 비밀번호를 알고 있기 때문에 냉장고 안에 있는 음식(변수)에 접근할 수 있다.

function outer() {
  let count = 0; // 외부 함수의 변수

  function inner() {
    count++;
    console.log(`현재 카운트: ${count}`);
  }

  return inner;
}

const counter = outer(); // outer() 호출 후 종료됨
counter(); // "현재 카운트: 1"
counter(); // "현재 카운트: 2"
counter(); // "현재 카운트: 3"

outer() 함수는 호출 후 종료되지만 count 변수는 메모리에서 사라지지 않는다.

내부 함수 inner()가 count에 계속 접근하기 때문이다.

이렇게 외부 함수의 변수에 접근할 수 있는 내부 함수가 클로저이다.

function 냉장고() {
  let 음식 = '김치';

  function 냉장고문열기() {
    console.log(`냉장고 안에는 ${음식}가 있다.`);
  }

  return 냉장고문열기;
}

const 비밀번호아는사람 = 냉장고();
비밀번호아는사람(); // 냉장고 안에는 김치가 있다.

냉장고() 함수가 실행되고 끝났지만(냉장고의 문이 닫혔지만), 그 안에 있던 음식 변수는 사라지지 않고 남아 있다.

비밀번호를 아는 사람(내부 함수 냉장고문열기())은 여전히 음식 변수에 접근할 수 있다.

이것이 바로 클로저이다.

클로저의 이점

1. 전역변수 사용의 최소화
2. 데이터 보존 가능
3. 모듈화를 통한 코드 재사용에 편리
4. 정보의 접근 제한(캡슐화)