Written by
Nostrss
on
on
클로저(closure)란..
클로저(closure)
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
공식문서 첫 문장 내용인데, 쉽게 와닿지가 않는 표현이라 이해하기가 쉽지 않다..
예시를 살펴봤다.
1 function makeFunc() {
2 var name = "Mozilla";
3 function displayName() {
4 alert(name);
5 }
6 return displayName;
7 }
8
9 var myFunc = makeFunc();
10 //1) myFunc변수에 displayName을 리턴함
11 //2) 유효범위의 어휘적 환경을 유지
12 myFunc();
13 //3) 리턴된 displayName 함수를 실행(name 변수에 접근)
공식 문서에서 예시의 설명을 천천히 풀어봤다.
1) myFunc
변수에 displayName
을 리턴함
- 즉 이런 구조이다.
myFunc = ƒunction displayName() { alert(name) }
2) 유효범위의 어휘적 환경을 유지
- 변수
name
이 있는어휘적 환경을 유지
하고 있다는 이런 뜻인가 싶다..2 var name = "Mozilla"; 3 function displayName() {
3) 리턴 된 displayName
함수를 실행(name
변수에 접근)
- 얼럿으로 Mozilla를 띄어준다.
과정이 궁금해서 console.log에 아래와 같이 찍어보았다.
1 function makeFunc() {
2 console.log('makeFunc 시작')
3 var name = "Mozilla";
4 function displayName() {
5 console.log(name)
6 }
7 return displayName;
8 }
9
10 const myFunc = makeFunc();
11 makeFunc 시작
12
13 myFunc();
14 Mozilla
신기한점 1
myFunc()
를 실행 시켰는데,makeFunc()
가 실행되지 않고 바로displayName()
이 실행되었다.
신기한점 2
displayName()
이name
변수 값을 불러 왔다
이것이 클로저
인 것 인가!!
또 다른 예제를 살펴봤다.
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;
}
}
}
}
sum(1) 실행결과
ƒ (b){ return function(c){ // 외부 함수 범위 (outer functions scope) return function(d){ // 지역 범위 (local scope) return a + b + c + d + e; } …
sum(1)(2) 실행결과
ƒ (c){ // 외부 함수 범위 (outer functions scope) return function(d){ // 지역 범위 (local scope) return a + b + c + d + e; } }
sum(1)(2)(3) 실행결과
ƒ (d){ // 지역 범위 (local scope) return a + b + c + d + e; }
sum(1)(2)(3)(4) 실행결과
20
머리로는 이해가 되긴 했는데, 이걸 어디서 활용할수 있는지는 좀 더 공부를 해봐야 할 것 같다.