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)가 실행을 완료하고 해당 변수가
해당 함수의 외부에서 더 이상 액세스 할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다.
'☁️ 구름 X kakao DeepDive > ☁️ HTML CSS JS' 카테고리의 다른 글
[JavaScript] Map, Filter, Reduce 메소드 (0) | 2025.01.12 |
---|---|
[JavaScript] Event Loop (setTimeout, 동기와 비동기) (0) | 2025.01.12 |
[JavaScript] Iterator(반복기) & Generator(생성기) (0) | 2025.01.09 |
[JavaScript] Symbol (0) | 2025.01.09 |
[JavaScript] 비동기요청에서 Callbacks, Promise 그리고 Async/Await (0) | 2025.01.09 |