[JavaScript] 콜백함수(Callback Function)란

콜백함수(Callback Function)

콜백함수는 함수를 활용하는 방법중 하나입니다.

정확하게는 콜백함수는 파라미터로 전달받은 함수를 말합니다.

파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있습니다.

 

예제를 통해 살펴보겠습니다.

 

add함수로 리턴된 값을 printResult함수의 인자로 전달해 주었습니다. 

function add(x, y) {
    return x + y
}

function printResult(result) {
    console.log(result)
}

printResult(add(10,20))

 

위 코드를 콜백함수로 구현하면 다음과 같이 변경할 수 있습니다.

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)

 

또한 콜백함수는 정의된 함수 뿐만아니라 익명 함수도 인자로 전달 가능합니다.

function add(x, y, print) {
    print(x + y)
}

add(10, 20, (result) => {
    console.log(result)
})

 

 

콜백함수의 장단점

콜백함수를 사용하면서 얻는 이점은 다음과 같습니다.

• 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 달리해 전달할 수 있습니다.
• 함수를 굳이 정의하지 않고 익명 함수로도 전달 가능합니다.
• 비동기(Asynchronous) 처리 방식의 문제점을 해결할 수 있습니다.

 

하지만 콜백함수를 사용하면 다음과 같은 단점이 있습니다.

• 콜백함수를 너무 남용하면 코드의 가독성이 떨어집니다. (콜백 지옥)
• 에러 처리가 어렵다.

 

콜백함수를 이용한 비동기처리

콜백함수는 주로 비동기처리에 사용되는데요. 비동기(Asynchronous)란 특정 코드의 실행이 끝날 때 까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미합니다.

대표적으로 자바스크립트에 내장되있는 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

 

 

참고

• https://bigtop.tistory.com/35