[자바스크립트 문법] 클로저(Closure)란?

안녕하세요~  Promise 객체 문법이 끝나고 클로저(Closure)가 무엇이고, 클로저의 특징과 문법들을 예시 코드들을 보면서 살펴보겠습니다. 

 

목차
1. 클로저
1-1. 클로저란?
1-2. 클로저의 특징
1-3. 클로저의 문법 코드
1-4. 클로저의 목적
1-5. 클로저 함수와 클로저 함수가 아닌 코드

 

서론

오늘은 자바스크립트에서 클로저(Closure)가 무엇이고, 클로저의 특징과 문법들을 간략하게 알아보겠습니다. "클로저" 라는 단어를 들어보신적 있으신가요? 대부분 처음듣거나 비동기 학습이 끝나기 전에는 들어보신적이 없으실 겁니다.  그럼 본론으로 짚어가면서 클로저(Closure)에 대한 내용을 학습해보도록 하겠습니다. 

 

 

본론

 

1. 클로저

 

1-1. 클로저란?

함수가 선언될때의 어휘적 위치를 기억하고 해당 변수 등을 접근할 수 있는 함수를 말합니다. 

 

즉 , 클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수라고 생각하시면 됩니다. 

1-2. 클로저의 특징

 

• 함수내에서 선언한 함수가 상위 스코프의 변수를 참조할 수 있다.
• 함수의 실행이 종료되어도 참조하고 있는 스코프의 변수는 해제되지 않는다. 

 

1-3. 클로저의 문법 코드

const a = 0; // 전역 변수
function b() {
    const index = 0; // 지역 변수
    console.log(a);
    return function c() {
        console.log(index);
    }
}

const d = b();

1-4. 클로저 함수와 클로저 함수가 아닌 코드

// 클로저 함수가 스코프에 담긴 경우
function counter() {
    let index = 0;

    return function increment() {
        index++;
        console.log(index);
    }
}
    debugger
    const increment = counter();
    debugger
    increment();
    debugger
// 스코프의 내용을 확인하면 클로저 스코프가 추가된 것을 디버깅햇을 때 확인할 수 있다. 그러면 클로저 함수



// 클로저 함수가 아닌 경우 어휘적 위치에 내부 함수가 참조하는 외부 함수의 변수가 없다.
// 반환되는 함수도 없다.
// 매개변수가 참조할 수 있으면 그것도 클로저 함수가 될 수 있다.


function counter() {
    index++;
    console.log(index);
}
debugger
const increment = counter;
debugger
const increment2 = counter();
debugger

// 클로저 함수가 아닌 경우 내부함수가 전역변수를 참조하고 있고 외부 함수의 변수를 참조하지 않은 경우
let index = 0; 
function counter() {
    return function increment() {
        index++;
        console.log(index);
    }
}
debugger
const increment = counter();
debugger
increment()
debugger

// 클로저가 있음 매개변수를 내부 함수가 참조하고 있다.
function counter(index) {
    return function increment() {
        index++;
        consoel.log(index);
    }
}
debugger
const increment = counter(0);
debugger
increment();
debugger

 

결론
✅ 클로저(Closure)란, 함수가 선언될 때의 외부 변수(스코프)를 기억하고 유지하는 함수다.
✅ 외부 함수의 변수를 내부 함수에서 계속 접근 가능하도록 만든다.
✅ 변수 은닉(캡슐화)과 상태 유지에 유용하게 활용된다

 

이상입니다~