What is Closure?

// without closure
function Person(name) {
  var _name = name  // _name은 숨겨진 변수라는 것을 강조하기 위해 사용
}

var person = new Person('Jane')
console.log(person.name) // undefined

// with closure
function Person(name) {
  var _name = name
  
  this.getName = function() {
    return _name  // 숨겨진 변수 _name에 접근한다.
  }
}

var person = new Person('Jane')
console.log(person.getName()) // Jane

function parent() {
  const a = 100
  const child = function() {
    console.log(a)  // parent()의 내부 변수 a를 참조한다.
  }
  return child   // parent() 함수는 내부 함수 child()를 리턴한다.
}

const inner = parent()  // inner() 함수는 리턴된 child() 함수 
inner() // 100

const a = function() {
  const counter = 0
  return function() {
    counter += 1
    return counter
  }
}

const b = a()
b() // function() { counter += 1; return counter }
// 이 counter는 어디서 왔지? 여전히 접근 가능하지만 counter 변수는 더럽혀지지 않는다.

// anchor 태그를 클릭할 때, 리프레시를 하지 않고 각 anchor의 index를 띄우는 예시

function registerHandlers() {
  const anchors = document.querySelectorAll('a')
  Array.from(anchors, (a, index) => {
    a.addEventListener('click', (event) => alertIndex(event, index))
  })
}

function alertIndex(event, index) {
  event.preventDefault()
  return alert(index)
} 

registerHandlers()