JavaScript 클로저(Closure)에 대하여 알아보도록 하자.
🥠 클로저(Closure)란?
MDN에서는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다고 정의하고 있다.
🥠 정적 유효범위(Lexical scope)
스코프(scope)는 함수를 호출할 때 결정되는 것이 아니라 함수를 선언할 때 정해진다.
아래 예제를 살펴보자
function makeFunc() {
var name = "pyo jung min";
function displayName() {
console.log(name);
}
return displayName;
}
var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)오류가 발생할 것 같지만 'pyo jung min'이 오류 없이 출력되는 것을 확인할 수 있다.
이는 함수 호출 이전에 함수 선언 시 이미 정적 유효범위(Lexical scope)가 정해져 있기 때문이다.
🥠 클로저 스코프 체인(Closure scope chain)
모든 클로저에는 세가지 스코프(범위)가 있다
- 지역 범위 (Local Scope, Own scope)
- 외부 함수 범위 (Outer Functions Scope)
- 전역 범위 (Global Scope)
따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다.
아래 예제를 확인해보자
// 전역 범위 (global scope)
var e = 10;
function sum(a){
return function(b){
return function(c){
// 외부 함수 범위 (outer functions scope)
return function(d){
// 지역 범위 (local scope)
return a + b + c + d + e;
}
}
}
}
console.log(sum(1)(2)(3)(4)); // log 20
// 익명 함수 없이 작성할 수도 있다.
// 전역 범위 (global scope)
var e = 10;
function sum(a){
return function sum2(b){
return function sum3(c){
// 외부 함수 범위 (outer functions scope)
return function sum4(d){
// 지역 범위 (local scope)
return a + b + c + d + e;
}
}
}
}
var s = sum(1);
var s1 = s(2);
var s2 = s1(3);
var s3 = s2(4);
console.log(s3) //log 20위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.
🥠 루프에서 클로저 생성하기: 일반적인 실수
변수 선언을 var로 할시 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.
error case의 경우 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.
이경우 해결 책은 아래와 같이 사용하면 된다.
- 함수 팩토리 사용
- 익명 클로저를 사용
- ES2015의 let 키워드를 사용
참조
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures
