Closure, 클로저

// 1번
function outerFunc() {
  var x = 10
  var innerFunc = function() {
    console.log(x)
  }
  innerFunc()
}
// innerFunc는 함수의 위치가 outerFunc의 내부이기 때문에, outerFunc의 변수 x를 클로저로 가져올 수있으며, innerFunc자신을 참조할 수 있다.
outerFunc()

var box = document.querySelector('.box')
var toggleBtn = document.querySelector('.toggle')

var toggle = (function() {
  var color = false
  // ① 클로저를 반환
  return function() {
    box.style.background = color ? 'red' : 'blue'
    // ③ 상태 변경
    color = !color
  }
})()

// 즉시실행함수로, 영구적으로 toggle 이벤트는 return 된 함수임.
// 하지만, closure 속성상, color라는 변수는 존재하고 있음.

// ② 이벤트 프로퍼티에 클로저를 할당
// console.dir(toggle) // closure로 color의 값 갖고있음
toggleBtn.onclick = toggle