콜백함수

1. 콜백함수란?

어떤 동작이 일어나고 다음에 일어나는 함수들을 콜백함수라고 함

태그.addEventListener('이벤트이름', 리스너함수)

반드시 자리가 중요함

예시

const onClick = () => {
  console.log('하이')
}
document.querySelector('button').addEventListener('click', onClick)

잘못된 예시

const onClick = () => {
  console.log('하이')
}
document.querySelector('button').addEventListener('click', onClick())

둘의 차이점?

잘못된 예시에서는 onClick() 하고 함수를 호출하면 리턴값이 들어감

const onClick = () => {
  console.log('하이')
  return undefined
}

뒤에 return undefined가 생략이 되어 있어서 onClick() 하면 그 리턴값이 addEventListner의 함수자리에 들어간다

즉

const onClick = () => {
  console.log('하이')
}
document.querySelector('button').addEventListener('click', onClick())

이것은

document.querySelector('button').addEventListener('click', undefined)

와 같게 된다