[JS] 클로저(Closure)란?🤔

✔️ 클로저(Closure)란?🤔

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다.
이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다."

간단하게 말하면 함수 안에 함수가 있고,
그 안에 있는 모든 변수들은 지역 변수이다.

function init() {
  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
  function displayName() {
    // displayName() 은 내부 함수이며, 클로저다.
    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}
init();

다음 예시를 보면 클로저 함수 사용으로
재사용이 용이하다는 것을 알 수 있다.

const tagMaker = (tag) => (content) => `<${tag}>${content}</${tag}>`;

const divMaker = tagMaker("div");
divMaker("hello"); // "<div>hello</div>"
divMaker("TATA"); // "<div>TATA</div>"

const ancjorMaker = tagMaker("a");
divMaker("go"); // "<a>go</a>"
divMaker("velog"); // "<a>velog</a>"

---

✔️ 클로저 모듈 패턴

내부 함수를 단 하나만 리턴하는 것에 그치지 않고,
객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다.

const makeCounter = () => {
  let value = 0;

  return {
    increase: () => {
      value = value + 1
    },
    decrease: () => {
      value = value - 1
    },
    getValue: () => value
  }
}
// makeCounter 함수는
// increase, decrease, getValue 메서드를 포함한 객체 하나를 리턴

const counter1 = makeCounter(); // counter1은 객체입니다.
counter1.increase(); // 1
counter1.increase(); // 2
counter1.decrease(); // 1
counter1.getValue(); // 1

const counter2 = makeCounter(); // counter2는 객체입니다.
counter2.decrease(); // -1
counter2.decrease(); // -2
counter2.decrease(); // -2
counter2.getValue(); // -3

---

✔️ 클로저를 활용한 toggle 예제

• HTML

<button class="toggle">toggle</button>
<div class="box" style="width: 100px; height: 100px; background: red;"></div>

• JavaScript

const box = document.querySelector(".box");
const toggleBtn = document.querySelector(".toggle");

const toggle = (function () {
  let isShow = false;

  // TODO: ① 클로저를 반환하는 함수를 작성하세요.
  return function () {
    // TODO: ③ isShow 변수의 상태를 변경하는 코드를 작성하세요.
    box.style.display = isShow ? "block" : "none";
    isShow = !isShow;
  };
})();

// ② 이벤트 프로퍼티에 클로저를 할당
toggleBtn.onclick = toggle;