자바스크립트 클로저는 꽤나 유명해서 많은 사람들이 알고 있지만 다시 한번 정리.
스코드
변수를 어디에서 어떻게 찾을지 정한 규칙으로, 여기서는 함수 단위의 변수참조를 나타낸다.
클로저
자신이 생성될 때의 환경을 기억하는 함수.
위 말을 조금더 실용적으로 풀어보면 '클로저는 자신의 상위 스코프의 변수를 참조할 수 있다' 라고 할 수 있다. 맞는 말이지만 오해의 소지가 있는 표현으로 조금 더 다듬으면
클로저
자신이 생성될 때의 스코프에서 알 수 있었던 변수를 기억하는 함수다.
자바스크립트의 모든 함수는 글로벌 스코프에 선언되거나 함수 안에서 선언된다. 이런 식이면 모든 함수는 곧 클로저인가?
함수가 의미적으로나 실제적으로 진짜 클로저가 되기 위한 가장 중요한 조건
클로저로 만들 함수가 myFn이라면, myFn내부에서 사용하는 변수 중에 myFn내부에서 선언되지 않은 변수가 있어야 한다.
function parent() {
var a = 5;
function myFn() {
console.log(a);
}
}
//혹은
function parent2() {
var a = 5;
function parent1() {
function myFn() {
console.log(a);
}
}
}
클로저는 자신이 생성될 때의 스코프에서 알 수 있었던 변수 중 언젠가 자신이 실행될 때 사용할 변수들만 기억하며 유지시키는 함수
클로저가 없는 함수 코드
var a = 10;
var b = 20;
function f1() {
return a + b;
}
f1();
//30
function f2() {
var a = 10;
var b = 20;
function f3(c, d) {
return c + d;
}
return f3;
}
var f4 = f2();
f4(5, 7);
//12
클로저가 있었던 코드
function f4() {
var a = 10;
var b = 20;
function f5() {
return a + b;
}
return f5();
}
f4();
// 30
f4의 마지막에 f5()를 실행 수 리턴하는 것에 주목해야 된다. 리턴하며 f5는 사라지고 f5가 사라지면 a, b도 결국 사라진다. 결국 클로저는 f4가 실행되는 사이에만 생겼다가 사라진다.
때가 조금 긴 스코프
function f9() {
var a = 10;
var f10 = function (c) {
return a + b + c;
};
var b = 20;
return f10;
}
var f11 = f9();
f11(30);
//60;
클로저는 자신이 생성되는 스코프의 모든 라인, 어느 곳에서 선언된 변수든지 참조할 수 있고 기억할 수 있다.( 호이스팅 let을 사용하면 예외)