[Java Script] 클로저(Closure)

 

자바스크립트에서 좀 어렵다고 생각하는 개념 중 클로저라는 것에 대해 알아보려 합니다.

그나마 쉽게 말하면 코드에서 함수가 선언될 때 그 유효범위(렉시컬 범위)를 기억하고 있다가,

함수가 외부에서 호출될 때 그 유효범위의 특정한 변수를 참조할 수 있는 개념이라고 합니다.

| 예시

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())

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