JS. 심화 학습

클로저

클로저(Closure)

함수가 선언될 때의 유효범위(렉시컬 범위)를 기억하고 있다가,
함수가 외부에서 호출될 때 그 유효범위의 특정 변수를 참조하고 있는 개념을 말합니다.

function createCount() {
  let a = 0
  return function () {
    return a += 1
  }
}

const count1 = createCount()

console.log(count1())       // 1
console.log(count1())       // 2
console.log(count1())       // 3

const count2 = createCount()

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

또 다른 예제

const h1El = document.querySelector('h1')
const h2El = document.querySelector('h2')

const createToggleHandler = () => {
  let isRed = false
  return event => {
    isRed = !isRed
    event.target.style.color = isRed ? 'red' : 'black'
  }
}
h1El.addEventListener('click', createToggleHandler())
h2El.addEventListener('click', createToggleHandler())