콜백 함수(callback function) 정리하기

콜백함수를 검색해서 찾아보면 "다른 함수의 인수로 전달되어 해당 함수의 내부에서 호출되는 함수"라고 하는데... 이렇게 설명하면 솔직히 알아듣나?

그래서 Claude씨에게 물어봤는데,

"나중에 실행해 달라고 맡겨놓은 함수"

라고 간단히 이해하면 된다고 하더라.

 

button.onclick = function(){
  alert("버튼이 클릭됨!")
}

여기서 alert("버튼이 클릭됨")을 포함한 function이 바로 콜백 함수라고....

콜백함수를 많이 볼 수 있는 것 중 하나는, 바로 전형적인 비동기 함수 중 하나인 setTimeout이다.

setTimeout(function(){
  console.log("3초 지났어")
}, 3000)

내가 헷갈릴까봐 설명하는건데,,,, setTimeout은

setTimeout(()=>{
 // 여기에 실행될 함수 내용 작성
}, 밀리세컨초)

인데, 뭐 function(){}나 ()=>{}(화살표 함수)나 둘은 똑같은거니까...

 

어쨌든 콜백함수의 가장 핵심 포인트는

1. 내가 직접 호출하지 않음 = 시스템이 알아서 호출함
2. 특정 상황이 되면 실행됨(이벤트 발생, 시간 경과 등)
3. 미리 준비해 놓은 함수 "이런 상황이 되면 이걸 해줘"

라고 생각하면 되겠다!

 

화살표 함수는 많이 쓰기 때문에 이제 익숙해졌는데 콜백함수는 형태만 봐도 엥 이게 뭐지? 하고 긴가민가하는 상황이 많아서....

그래서 Claude씨에게 콜백함수의 형태를 물어봤다. 익숙해지면 이제 이렇게 정리 안해도 알겠지..

 

1. 함수 선언식 Function Declaration

function handleOpen(){
  connected.value = true
}

ws.value.open = handleOpen

 

2. 함수 표현식 Function Expression

// 익명 함수(이름이 없는 함수)
ws.value.onopen = function(){
  connected.value = true
}  

// 가명 함수
ws.value.onopen = function handleOpen(){
  connected.value = true
}

 

3. 화살표 함수 Arrow Function  

ws.value.onopen = () => {
  connected.value = true
}

// 한 줄일 때는 중괄호 생략
ws.value.onopen = () => connected.value = true

// 매개변수가 있을 때
ws.value.onmessage = (event) => {
  console.log(event.data)
}

// 매개변수가 하나일 때 괄호 생략
ws.value.onmessage = event => {
  console.log(event.data)
}

(+ 화살표 함수란? 여기서 참고할것)

 

가장 많이 쓰는 방식은 함수 표현식과 화살표 함수이다. 나도 화살표 함수에서 비슷하게 본 것 같기도 하고...