클로저 함수

클로저 함수

함수를 리턴하는 함수로써, 외부 함수와 내부 함수로 구분할 때 내부 함수를 클로저 함수라 합니다.
클로저는 리턴하는 함수에 의해 Scope가 구분되며, 클로저의 핵심은 Scope를 이용해서 접근 범위를 닫아 캡슐화 하는데 있습니다.

---

선언하는 방법

• 화살표 함수

const add = a => b =>{
     return a+b; 
}

• 일반적인 함수

const add = function(a){
  //외부 함수
    return function(b){
        return a+b;
    }
  //내부 함수
}

두 함수는 똑같은 역할을 하는 클로저 함수입니다. 외부 함수에서는 내부 함수의 변수 b에 접근할 수 없지만, 내부 함수에서는 외부 함수의 변수 a에 접근할 수 있습니다.

---

클로저 함수를 사용하는 이유

일반적인 함수는 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없지만, 클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수가 메모리 상에 저장이 되므로 반복해서 사용할 수 있게 됩니다.

const add = function(a){
    return function(b){
        return a+b;
    }
}

const sum = add(3);
console.log(sum(4));
// 7
console.log(sum(7));
// 10

이러한 특징을 이용한다면 다음과 같이 실용적으로 이용할 수 있게 됩니다.

---

클로저 활용

클로저를 이용해 만든 함수입니다.

• HTML태그 만들기

const createTag = tag => content => `<${tag}>${content}</${tag}>`;

const createDiv = createTag('div');
createDiv('Closure');
// <div>Closure</div>

• 클로저 모듈 패턴

캡슐화를 구현할 때 사용하는 방법 중 하나입니다.

const calc = () => {
  // private 영역, 함수 밖에선 total에 접근할 수 없다.
  let total = 0;
  return {
    // public 영역
    add: (a, b) => {
      total += a + b;
    },
    sub: (a, b) => {
      total += a - b;
    },
    getTotal: () => {
      return total;
    },
  };
};

const Calc = calc();

Calc.add(5, 6);
console.log(Calc.getTotal()); // 11
Calc.sub(1, 3);
console.log(Calc.getTotal()); // 9

만약 클로저 함수를 이용하지 않고 total이라는 변수에 값을 저장하려고 한다면, total이라는 변수는 전역변수로 선언을 해야합니다.
calc 함수는 total의 값을 보존하고 있기 때문에 따로 전역변수로 선언하지 않아도 되는 것입니다.
클로저를 이용한다면, 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 안전하게 지킬 수 있는 장점이 있습니다.