본문 바로가기
☁️ 구름 X kakao DeepDive/☁️ HTML CSS JS

[JavaScript] Closure

by 뽀짜꼬 2025. 1. 11.
728x90
반응형

Closure

: 다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우에

외부 함수(outerFunction)가 실행을 완료하고 → 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도

→ 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다!

 

외부함수가 완료했는데 내부 함수는 난 계속 할수이떠!!이러는거.. 라고 생각했다.

 

 

1. outerFunction('outside')은 변수 "newFunction" 에 할당되는 즉시 호출된다.

2. 호출되면 outerFunction은 변수 "newFunction"을 outerFunction(outerVariable) 대신 innerFunction(innerVariable)을 반환한다.

 >> newFuntion에는 innerFunction을 반환하는거다.

3. 그런 다음 변수를 newFunction('inside')로 호출하여 innerFunction('inside')을 호출한다.

클로저는 innerFunction이 원래 outerFunction('outside')으로 설정한 outerVariable 매개변수를 기억하고 액세스 할 수 있다는 것이다. 따라서 'inside'로만 호출되었더라도 'outside'와 'inside'를 모두 console.log 할 수 있다.

 


closure 어케쓰는데

✔️ 기존

function functionB() {
    let c = 'c';
    console.log(a,b,c); 
    //여기서 b가 functionA에 있어 가져올수가 없어서 에러남.
}

function functionA() {
    let b = 'b';
    functionB()
    console.log(a, b); 
}
functionA();

 

✔️ 해결

 

closure - 함수 안에 함수 만들어서 내부 함수가 외부 함수의 변수에 접근할 수 있게 한다.

let a = 'a';

function functionA() {
    let b = 'b';
    function functionB() {
        let c = 'c';
        console.log(a,b,c); // c is accessible here
    }
    functionB()
    console.log(a, b); // a is accessible here
}
functionA();

>> b의 스코프가 closure 스코프임.


다른 함수 내부에 정의된 함수(innerFunctoin)가 있는 경우, 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가

해당 함수의 외부에서 더 이상 액세스 할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다.

728x90
반응형