클로저(Closure)란?

클로저를 쉽게 이해해봅시다!

클로저(Closure)는 자바스크립트에서 헷갈리기 쉬운 개념 중 하나입니다. 하지만 쉽게 설명하면, 클로저는 "자신이 선언될 때의 주변 환경(변수들)을 기억하고 사용할 수 있는 함수" 라고 할 수 있습니다.

조금 더 쉽게 이해할 수 있도록 예를 들어보겠습니다.

---

클로저를 일상에서 찾아보기

예제: 냉장고에 있는 물건 기억하기

냉장고 안에 과일이 있다고 가정해보겠습니다. 냉장고를 열어서 과일을 꺼내는 사람이 있습니다. 이 사람이 냉장고 문을 닫더라도, 어떤 과일이 있었는지 기억하고 다시 꺼낼 수 있다면? 이것이 바로 클로저의 개념과 유사합니다!

---

코드로 클로저 이해하기

이제 자바스크립트 코드로 살펴보겠습니다.

function 냉장고() {
    let 과일 = "사과"; // 냉장고 안에 있는 과일

    return function() {
        console.log(과일); // 냉장고 안의 과일을 기억하고 출력함
    };
}

const 냉장고문열기 = 냉장고(); // 냉장고를 생성하고 문을 열 준비 완료!
냉장고문열기(); // "사과" 출력 (냉장고 안에 뭐가 있는지 기억함)

 

 

1. 냉장고() 함수가 실행되면 과일이라는 변수를 만들고, "사과"를 저장합니다.

2. return function() { console.log(과일); } 이 부분이 클로저입니다. 여기서 반환된 함수는 과일 변수를 기억하고 있습니다.

3. 냉장고문열기 = 냉장고(); 를 실행하면, 냉장고가 생성되고 문을 열 준비가 됩니다.

4. 냉장고문열기(); 를 실행하면 "사과"가 출력됩니다.

이처럼, 클로저는 자신을 감싸고 있던 함수(냉장고)의 변수를 기억하고 사용할 수 있는 함수입니다.

---

클로저가 왜 필요할까요?

클로저는 여러 상황에서 유용합니다. 대표적으로 변수를 보호하거나, 특정 데이터를 계속 유지해야 할 때 사용할 수 있습니다.

 

1. 변수를 보호하는 용도

function 카운터() {
    let count = 0;
    
    return function() {
        count++;
        console.log(`현재 카운트: ${count}`);
    };
}

const 증가 = 카운터();
증가(); // 현재 카운트: 1
증가(); // 현재 카운트: 2
증가(); // 현재 카운트: 3

 

이 코드에서 count 변수는 외부에서 직접 접근할 수 없습니다. 하지만 증가() 함수를 실행할 때마다 내부적으로 count 값이 계속 유지됩니다.

이렇게 하면 실수로 count 값을 잘못 변경하는 일을 방지할 수 있습니다!

---

클로저는 함수가 선언될 때의 환경(변수들)을 기억하고, 나중에도 사용할 수 있도록 해주는 기능입니다. 이를 이용하면 데이터를 보호하고, 특정 상태를 유지하는 등의 다양한 활용이 가능합니다.

다음에 클로저를 접할 때, "냉장고 문을 닫아도 안에 있는 과일을 기억하는 기능"이라고 떠올려 보세요!

 

---