Callback 함수란?
Callback함수란 함수의 인자로 들어가는 함수를 말한다. 즉, 다른 함수의 인자로써 이용되며 어떤 이벤트에 의해 호출되어지는 함수이다.
예제
add 함수로 리턴된 값을 printResult함수의 인자로 전달해 주었다.
function add(x, y){
return x + y
}
function printResult(result) {
console.log(result)
}
pringResult(add(10, 20))
// 30위 코드를 콜백함수로 구현하면 다음과 같이 변경할 수 있다.
add함수에 콜백함수를 받을 print라는 파라미터를 추가하고 내부에서 x와 y의 합을 인자로 전달해주었다. 그리고 print파라미터의 인자로 printResult함수를 전달해 주었다. 바로 여기서 printResult함수가 콜백함수가 되는 것이다. 먼저 add함수가 호출된 후 printResult함수가 add함수 내부에서 나중에 호출된다.
function add(x, y, print){
print( x + y)
}
function printResult(result) {
console.log(result)
}
add(10, 20, printResult)
// 30또한 콜백 함수는 정의된 함수 뿐만 아니라 익명 함수도 인자로 전달이 가능하다.
function add(x, y, print) {
print(x + y)
}
add(10, 20, (result) => {
console,log(result)
})콜백함수의 장단점
장점
- 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 달리해 전달할 수 있다.
- 함수를 굳이 저의하지 않고 익명 함수로도 전달이 가능하다.
- 비동기(Asychronous) 처리 방식의 문제점을 해결할 수 있다.
단점
- 콜백함수를 너무 남용하면 코드의 가족성이 떨어진다.(콜백지옥)
- 에러 처리가 어렵다.
콜백함수를 이용한 비동기처리
콜백함수는 주로 비동기처리에 사용되며, 비동기(Asychronous)란 특정 코드의 실행이 끝날 때까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미한다. 대표적으로 자바스크립트에 내장되어 있는 setTimeout() 이라는 함수가 있다.
callback 이라는 파라미터를 선언하고 콜백함수를 전달 받아 setTimeout() 함수의 인자로 전달하였다.
setTimeout() 함수는 비동기 함수이기 때문에 코드의 실행이 끝날 때까지 기다리지 않고 바로 다음 코드로 넘어간다. 그렇기 때문에 Hello가 먼저 출력되고 1(1000ms)초 뒤에 콜백함수가 실행 되는 것이다.
function callBackTestFunc(callback){
setTimeout(callback, 1000)
console.log('Hello')
}
callBackTestFunc(() => {
console.log('waited 1 second')
})
// Hello
// waited 1 second출처
