JavaScript _tip / 콜백 함수의 개념

자바스크립트를 공부 하다보면 콜백함수라는 말을 많이 들어보셨을 겁니다. 과연 이 콜백함수는 무엇일까요 ?? 이번 블로깅은 setTimout( ) 함수를 예를 들어 콜백함수가 어떻게 쓰이는지 알아보도록 하겠씁니당

 

---

콜백(callback) 함수

콜백함수는 함수의 인수로 사용되는 함수를 콜백 함수라고 합니다! 콜백 함수를 이해하기 좋은 예시가 setTimeout(함수, 시간) 이 있습니다. 간단하게 설명하자면 타이머라고 생각하면 됩니다.

 

깊게 알고 싶으면 참고 https://developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

WindowTimers.setTimeout() - Web API | MDN

그렇다면 지금부터 아래 코드를 콘솔창에 복사 붙이기를 해 봅시다!!!

 

function timeout() {
 
setTimeout(()=> {
    console.log('joycoding')
  }, 3000)
}
timeout()
    console.log('done!!!')
 

function timeout(callback) { // 2. 인수를 받아 줄 매개변수
 
setTimeout(()=> {
    console.log('joycoding')
    callback() // 3. 여기다 호출했어요! //콜백함수//
  }, 3000)
}
//콜백함수//
timeout(() => {   // 1. 익명함수 인수
    console.log('done!!!')
})

 

어떤 결과가 나오나요 ?? 3초뒤에 joycoing과 done이 같이 나오는 것을 볼 수가 있습니다!!! 이것이 콜백함수의 개념입니다!!! 콜백함수는 내가 넣고 싶은 내용을 원하는 위치에 추가적으로 넣고 싶을 때 사용 할 수 있고 실행위치를 확실하게 보장하기 때문에 콜백함수를 씁니다!!!

 

딱 두가지만 기억하면 좋을 것 같습니다!!

 

콜백함수는 함수의 인수로 사용되는 함수!!

어떤 이벤트에 의해 호출되는 함수!!

 

여기까지가 콜백함수의 기본적인 원리에 대해 설명하였습니다!!!

 

하지만 콜백함수를 좀 더 자세히 파면 콜백함수의 동기/비동기 처리 방식이나 주의해야할 문법 등이 있다고 하니 기본 개념을 이해 했으면 깊게 공부 하시는 것을 권장합니다!