| 예시

function count() {

let a = 0;

return function () {

return a+= 1;

}

const count1 = count();

console.log(count1()); // 1

console.log(count1()); // 2

console.log(count1()); // 3

이처럼 함수가 외부에서 호출되면 그 변수를 참조하여 값을 증가시킵니다.

또한 다른 변수로 또 호출하면 변수에 있는 값이 새로 저장이 됩니다.

const count2 = count();

console.log(count2()); // 1

console.log(count2()); // 2

이런 식으로 클로저를 사용하면 전역에 변수선언을 안 해도 된다는 장점이 있습니다.

또한 비슷한 형태의 코드를 클로저를 통해 재사용률을 높일 수 있습니다.

const h1El = document.querySelector('h1');

const h2El = document.querySelector('h2');

let h1IsRed = false;

let h2IsRed = false;

h1El.addEventListener('click', e => {

h1IsRed = !h1IsRed;

h1El.style.color = h1IsRed ? "red" : "black";

})

h2El.addEventListener('click', e => {

h2IsRed = !h2IsRed;

h2El.style.color = h2IsRed ? "red" : "black";

})

이런 식으로 상태 관리를 따로 해주던 코드를

const h1El = document.querySelector('h1');

const h2El = document.querySelector('h2');

const createToggleHandler = () => {

let isRed = false;

return e => {

isRed = !isRed;

e.target.style.color = isRed ? "red" : "black";

}

h1El.addEventListener('click', createToggleHandler())

h2El.addEventListener('click', createToggleHandler())

이렇게 클로저를 통하여 관리해 줄 수 있습니다.

[Java Script] 클로저(Closure)