클로저(Closure) | 클로저의 유용한 활용

클로저(closure)는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저를 정의해보면 다음과 같습니다.

 

외부 함수에 접근할 수 있는 내부 함수(이러한 원리)를 일컫는 용어로, 스코프 범위 개념에 따라 내부함수의 범위에서는 외부함수 범위에 있는 변수에 접근이 가능하지만, 그 반대는 실현이 불가능한 개념입니다.

 

 

# 클로저의 유용한 활용

 

*커링 이용: 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게하는 방법

function add(a){
  return function(b){
    return a + b;
  }
}
 
let result = add(4)(6);
console.log(result); // 10
 
let result100 = add(100); 
console.log(result100(10)); // 110
console.log(result100(20)); // 120

 

▲ a값을 100으로 고정해놓은 후 재사용이 가능하다.

 

 

*캡슐화 이용: 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법

function bank(money){
  return{
    getMoney : function() {
      return money;
    },
    setMoney : function(_money) {
      if(typeof _money === "number"){
        money = _money
      } else{
        console.log("잘못된 값을 입력하셨습니다.");
      }
    }
  }
}
 
let person1 = bank(3000);
let person2 = bank(4000);
 
console.log(person1.getMoney()); // 3000
console.log(person2.getMoney()); // 4000
 
person1.setMoney("1000");        // "잘못된 값을 입력하셨습니다."
person2.setMoney(2000);
 
console.log(person1.getMoney()); // 3000
console.log(person2.getMoney()); // 2000

 

▲ Private속성을 통해 객체의 내부에서만 사용해야되는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다.

 

 

*템플릿 함수 이용 : html 태그 만들기

function htmlMaker(tag){
  let startTag = '<' + tag + '>';
  let endTag = '</' + tag + '>';
  return function(content){
    return startTag + content + endTag;
  }
}
 
let divMaker = htmlMaker('div');
console.log(divMaker('title'));   // <div>title</div>
console.log(divMaker('content')); // <div>content</div>
 
let spanMaker = htmlMaker('span');
console.log(spanMaker('list'));    // <span>list</span>

 

▲ 외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용이 가능하다.