자바스크립트 클로져 예시

클로저란?

함수에서 함수로 외부변수를 전달한뒤에도

실행컨텍스트가 종료된이후에도 참조한 외부변수가 사라지지않는 현상

보통 종료된이후에는 GB에 할당되야하는데 계속 남기때문에 메모리 누수의 원인이됨.

 

콜백함수 내부에서 외부변수를 참조하기 위한 방법이다.

let fruits = ['a','b','p']
let $ul = document.createElement('ul')
const alertFruit = (fruit) => {
  alert(fruit)
}

fruits.forEach(fruit => {
  let $li = document.createElement('li')
  $li.innerText = fruit
  // 클로저발생(메모리낭비): 콜백함수를 내부함수로선언해서 외부변수를 직접참조
  // $li.addEventListener('click',()=>{
  //   alert(fruit)
  // })
  
  // 클로저를 발생하지 않게하는법
  // 1. 바인드 메서드로 값을 강제로 직접넘겨줌 => 위험부담
  // $li.addEventListener('click', alertFruit.bind(null, fruit))
  // 2. 고차함수 
  $li.addEventListener('click', ()=>alertFruit(fruit))
  $ul.appendChild($li)
})
document.body.appendChild($ul)