Javascript / Closure Function (Currying, Closure module pattern)

1. Closure 함수의 정의

함수 자체를 어떤 함수의 parameter로 받아오면,

받아온 함수 내에서 부모 함수에 대한 변수를 사용할 수 있는 것을 Closure라고 한다.

또는, 자식함수 자체를 Closure라고도 한다.

 

// Sourcecode
 
function parentFn() {
 
  let parentVar = 'Burger';
  console.log(parentVar);
 
 
 
  function childFn(){
    let childVar = 'Cheese';
    console.log(childVar);
  }
return childFn;
}
 
//------------------------------------------
// #1. parentFn 호출
 
parentFn()
// 결과 :  Burger
//             f childFn(){ ...}
 
//-------------------------------------------
// #2. parentFn 호출 후, 내부함수 호출
 
parentFn()()
// 결과 : Burger
//       Cheese
 
//-------------------------------------------
// #3. childFn 호출
 
childFn()
//결과 : ReferenceError : childFn is not defined.
// >> parentFn 내부에서 정의되어 지역변수로서 childFn이 선언되었으므로, 외부에서 그냥 호출할 수 없음.
 
//-------------------------------------------
// #4. parentFn의 호출을 변수에 담고, 변수를 실행
 
let a = parentFn()
a()
 
//결과 : Burger
 
//      Cheese
 
// >> a 라는 변수에 parentFn 함수를 호출한 것을 담았으므로, a = 'Burger' + childFn.
 
//      이 상태에서 a를 실행하면, a안의 함수인 childFn이 호출되어 실행됨.
//-------------------------------------------

 

 

---

 

2. Closure 함수의 사용 예제

 

 

Currying

 

함수가 여러 개의 파라미터를 받되, 그 함수 자체로 파라미터들을 받는게 아니라 자식 함수들이 각각의 인자를 받게 하는 방법이다.

Currying을 사용하면 특정 파라미터를 고정해놓고, 나머지 파라미터들만 변경할 수 있으며 코드도 더 깔끔하게 작성할 수 있게된다.

 

function parent(x) {
  return function child(y) {
    return x + y;
  }
}
 
 
// Test #1.
 
parent(1)(2);  // 결과 : 3
 
 
// Test #2.
 
let plusOne = parent(1);
plusOne(2);  // 결과 : 3

 

---

 

 

은닉화

 

변수를 함수 안에서만 작성하여 scope를 함수 밖으로 노출시키지 않는 방법이다.

 

아래 예제에서 count라는 변수는 counter()라는 함수 안에서만 정의되었으므로,

혹시 코드 외부에서 count라는 것을 가져오거나, 새로 작성하여 할당해도 counter() 함수의 작동에는 문제가 되지 않는다.

counter() 함수 내부의 함수를 사용해야만 count 값이 수정되므로 count값이 보호될 수 있다.

 

function counter() {
  let count = 0;
 
  return {
    increase: function() {
      count++;
    },
    result: function() {
      return count;
    }
  }
}
 
let increasingCounter = counter();
 
increasingCounter.increase();
increasingCounter.increase();
increasingCounter.increase();
increasingCounter.result();   // 결과 : 3

함수 내부에 return 값을 함수로 주어야 한다는 것을 기억하자. 'return {  ....  }'

 

---

 

 

 

3. 참조하면 좋은 글

 

1) DailyEngineering : Javascript 클로저(Clousre)

hyunseob.github.io/2016/08/30/javascript-closure/