관리 메뉴

프로그래밍 삽질 중

[JS - node.js] 클로저(closer)란? 본문

과거 프로그래밍 자료들/Javascript&typescript

[JS - node.js] 클로저(closer)란?

평부 2021. 12. 9. 23:11

* 초보자를 위한 Node.js 200제 - 김경록, 정지현 지음 중급 내용(이하 노드 200제) 참고

* mozilla 참고(https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures)

 

 

 

 

클로저(closer) 개념

- 노드 200제 : 내부 함수가 참조하는 외부함수의 지역변수가 외부함수가 리턴된 이후에도 유효성이 유지될 때,

                   이 내부함수를 클로저라고 한다, 클로저는 외부함수 변수의 값이 아닌 참조를 저장하는 식

- mozilla : 함수와 함수가 선언된 어휘적 환경의 조합

자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 

 

 

 

 

[예시 - 노드 200제]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function grandParent(g1, g2) { //함수 실행 시 순차적으로 리턴됨
    const g3 = 3;
    return function parent(p1, p2) {
        const p3 = 33;
        return function child(c1, c2) {
            const c3 = 333;
            return g1 + g2 + g3 + p1 + p2 + p3 + c1 + c2 + c3;
        };
    };
}
 
const parentFunction = grandParent(12);
const childFunction = parentFunction(1122);
console.log(childFunction(111222)); //1 + 2 + 3 + 11 + 22 + 33 + 111 + 222 + 333 === 738
cs

 

 

[예시 - mozilla]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//예1
function makeFunc() {
      var name = "Mozilla";
      function displayName() {
        alert(name);
      }
      return displayName;
    }
 
    var myFunc = makeFunc();
    //myFunc변수에 displayName을 리턴함
    //유효범위의 어휘적 환경을 유지
    myFunc();
    //리턴된 displayName 함수를 실행(name 변수에 접근)
 
//예2
   function makeAdder(x) {
      var y = 1;
      return function(z) {
        y = 100;
        return x + y + z;
      };
    }
 
    var add5 = makeAdder(5);
    var add10 = makeAdder(10);
    //클로저에 x와 y의 환경이 저장됨
 
    console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
    console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
    //함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산
cs

 

 

 

[예시 복습] - /**/부분은 결과 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function sky(question) {
    var weather1 = 'rain';
    return function sky2(question2) {
      var weather2 = 'sunny';
      return function sky3(question3) {
        var weather3 = 'windy';
        return question + " : " + weather1 + " " + question2 + " : " + weather2 + " " + question3 + " : " + weather3;
      }
    }
  }
  
  const result1 = sky('비오는 날씨는? : ');
  const result2 = result1('맑은 날씨는? : ');
 
  console.log(result2('오늘의 날씨는? : '));
  
/*
[결과]
비오는 날씨는? :  : rain 맑은 날씨는? :  : sunny 오늘의 날씨는? :  : windy
 */
 
  function money(x) {
    var color = 'green';
    return function(y) { //클로저에 x의 환경(값)이 저장됨
      color = 'orange';
      return x + y ;
    };
  }
  
  var result3 = money('test1 : ');
  var result4 = money('test2 : ');
 
  console.log(result3('만원'));
  console.log(result4('오만원'));
  //클로저에 x와 y의 환경이 저장됨
  
  /*
  [결과]
  test1 : 만원
  test2 : 오만원 
  */
cs