[JS] | 클로저, Closer

클로저

 외부 함수의 변수(스코프)를 기억하고 있는 내부 함수

• 상태 유지를 위해 (count처럼), 비공개 변수처럼 활용 가능 
• 함수 안에 함수를 정의하고 그 내부 함수를 반환하거나 사용할 때

function secretPassword() {

    const password = "비밀123";

    return function guess(input) {

        return input === password ? "정답!" : "땡!";

    };

}

const game = secretPassword();

console.log(game("hello")); // 땡!

console.log(game("비밀123")); // 정답!

password는 외부에서 접근할 수 없어.
하지만 클로저 덕분에 game 함수는 계속 그걸 기억하고 있음

🔁 정리 요약

• 클로저는 함수가 자기 주변 스코프를 "기억"하는 능력
• 외부 함수가 끝나도 변수는 내부 함수에 의해 계속 살아 있음.
• Promise든, 이벤트든, 비동기든 자주 쓰이는 이유는 "변수 기억력" 때문이다

정리 : 

"함수 안에 변수를 만들고, 그걸 사용하는 내부 함수를 리턴해서, 바깥에서 그 내부 함수를 호출하는 구조"가 클로저다.

🔒 왜 중요한데?

• 외부에서는 못 보이게 (은닉) 하고
• 내부 함수는 계속 그 값에 접근 가능
• 즉, 변수를 기억하면서도 보호할 수 있음

🔍 기본 구조 예시

function outer() {

    let count = 0; // 외부 변수

    function inner() {

        count++;

        console.log(count);

    }

    return inner;

}

const fn = outer(); // outer 실행 → inner 함수가 return됨

fn(); // 1

fn(); // 2

fn(); // 3

🔎 이 코드에서 무슨 일이 벌어졌냐면…

1. outer()가 실행되면, count는 0으로 만들어짐
2. inner()는 count를 사용하는 함수고, outer의 지역 변수인 count를 참조함
3. outer()는 끝났지만, inner가 count를 기억한 채 살아있음
4. 그래서 fn()을 여러 번 실행할 때마다 count 값이 유지됨

이게 바로 클로저
함수가 끝났는데도, 그 함수 내부에 선언된 변수를 사용하고 있는 함수가 있어서 메모리에 남아있는 상태!

🧠 클로저의 핵심 포인트 요약

포인트설명

❗ 함수 안에 함수	내부 함수가 외부 변수 사용해야 클로저가 생김
💾 변수 기억	외부 함수가 끝나도, 내부 함수가 그 변수를 "기억"
🧼 가비지 컬렉션 막음	참조하고 있으면 변수 안 사라짐 (메모리 관리 중요)

 

✅ let vs var 완벽 비교

🔒 스코프	함수 스코프	블록 스코프
🕑 호이스팅	됨 (초기화는 안 됨, undefined)	됨 (초기화 안 됨, 접근하면 에러)
🔁 중복 선언	같은 스코프에서 가능	같은 스코프에서 불가능
💥 반복문에서	모든 반복에 대해 같은 변수 공유	반복마다 새 변수 생성