클로저(Closure)란?

클로저는 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말합니다.

비유하자면, 함수가 자신이 생성된 환경을 '기억'하는 것이라고 할 수 있습니다. 클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다.

 

---

스코프란?

Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있다.

즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’ 자바스크립트에선 스코프는 2가지 타입이 있습니다. 바로 global(전역)과 local(지역) 

---

 

클로저의 핵심 요소

1. 중첩 함수(Nested Function): 함수 안에 정의된 함수.

2. 외부 함수의 변수 접근: 내부 함수가 외부 함수의 변수에 접근 가능.

3. 변수 상태 유지: 외부 함수가 종료되어도, 내부 함수는 외부 함수의 변수 상태를 유지.

---

왜 클로저가 유용한가?

1. 데이터 은닉:  클로저는 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있습니다. 이를 통해 데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지할 수 있습니다. 예를 들어, 특정 함수 내부에서만 접근 가능한 변수를 생성하고, 이를 조작할 수 있는 함수만 외부로 노출하여 안전하게 데이터를 관리할 수 있습니다.

function createCounter() {
    let count = 0; // 외부에서는 접근 불가한 변수
    
    return {
        increment: function() {
            count++;
            console.log(`Count: ${count}`);
        },
        decrement: function() {
            count--;
            console.log(`Count: ${count}`);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment(); // Count: 1
counter.increment(); // Count: 2
console.log(counter.getCount()); // 2
counter.decrement(); // Count: 1
console.log(counter.count); // undefined (은닉된 변수)

여기서 count는 클로저를 통해 은닉되어 외부에서 직접 접근할 수 없고, 오직 increment, decrement, getCount 메서드를 통해서만 접근할 수 있습니다.

 

 

2. 상태 유지: 함수 호출 간에 상태를 저장할 수 있음.

3. 콜백 및 이벤트 핸들러: 비동기 작업에서 데이터 저장.

 

 

---

기본예제 )

function outer() {
    let count = 0; // 외부 함수의 변수
    
    function inner() {
        count++; // 외부 변수 접근 및 수정
        console.log(`Count: ${count}`);
    }
    
    return inner; // 내부 함수를 반환
}

const closureFunc = outer(); // outer() 실행, inner 함수 반환
closureFunc(); // Count: 1
closureFunc(); // Count: 2
closureFunc(); // Count: 3

 

위 예제에서 inner 함수는 outer 함수의 count 변수에 접근합니다.

outer 함수가 실행된 후에도 count는 내부 함수가 참조하기 때문에 사라지지 않고 상태를 유지합니다.

 

 

 

 

---

https://www.youtube.com/watch?v=WbVVKY9CDP0