클로저(closure)란..

클로저(closure)

Closure MDN 공식문서 보러가기

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

공식문서 첫 문장 내용인데, 쉽게 와닿지가 않는 표현이라 이해하기가 쉽지 않다..

예시를 살펴봤다.

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을 리턴함

3) 리턴 된 displayName 함수를 실행(name 변수에 접근)

과정이 궁금해서 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

신기한점 2

이것이 클로저 인 것 인가!!

또 다른 예제를 살펴봤다.

 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

머리로는 이해가 되긴 했는데, 이걸 어디서 활용할수 있는지는 좀 더 공부를 해봐야 할 것 같다.