[JavaScript] 콜백 함수 (Callback Function)

콜백 함수를 처음 들으면 다시 부르다? 어떠한 의미인지 한 번에 파악하기 힘듭니다. 오늘은 callback 함수가 무엇인지 어떠한 함수인지 알아보겠습니다. :>

---

1. 콜백 함수

콜백 함수는 다른 함수의 매개변수로 함수를 넘겨주고, 어떠한 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수를 말합니다.

 

예시를 들어 설명하겠습니다.

1.  음식점에 주문을 하려고 합니다.
2. 그런데 음식점의 주문이 밀려 지금 당장 해줄 수 없다고 합니다.
3. 그렇다면 음식 준비가 끝나면 음식을 받아갈 테니 전화를 달라고 부탁합니다.
4. 전화가 오기 전까지 자신이 하고 싶은 일을 할 수 있습니다.

이때 음식점에서 전화가 걸려오고 받는 것이 콜백 함수가 호출되는 시점과 같습니다. 

 

2. 콜백 함수 사용법

간단한 콜백 함수의 예로 살펴보겠습니다.

function sum(a, b, callback){
    let result = a + b;
    callback(result);
}

sum(10, 20, function(result){
    console.log(result); // 30
})

sum이라는 함수를 호출할 때 익명 함수를 파라미터로 넘겨줍니다. sum함수가 a와 b를 더하고 callback() 함수에 파라미터를 넘기면 익명 함수가 실행되는 것을 알 수 있습니다.

 

3. 콜백 함수를 사용하는 이유

그렇다면 콜백 함수를 사용하는 이유가 무엇일까요?

콜백 함수는 특정 상황에 함수가 동작하도록 하기 위해 사용합니다. 어떠한 버튼을 눌렀을 때나 어떠한 키보드를 눌렀을 때와 같은 이벤트가 발생했을 경우, 상황에 따라 자신이 원하는 함수를 실행하고 싶은 경우에 활용할 수 있습니다. 

 

위의 예를 콜백 함수를 사용하지 않은 코드로 바꿔 보겠습니다.

function sum(a, b){
    let result = a + b;
    return result;
}

function print(result) {
	console.log(result);
}

print(sum(10, 20)); // 30

결과에는 차이가 없어보입니다. 그러나 이 예시는 print() 함수가 sum()함수의 완료 이후에 실행된다는 것입니다. 콜백 함수를 사용하면 sum() 함수가 끝나는 것을 기다리지 않고 진행 중에 콜백 함수를 호출하여 빠르게 처리할 수 있습니다. 이러한 방식을 비동기 처리라고 말합니다.

 

이번 글에서는 콜백 함수에 대해 알아봤습니다. 동작과정과 사용되는 이유에 대해서 말씀을 드렸는데 아직 어떠한 부분에서 사용되는지 이해하기 힘드실 것입니다. 다음글인 비동기 처리를 공부하시면 왜 콜백 함수를 사용하는지 파악하실 수 있으니 지금은 한번 공부하시고, 비동기 처리를 읽고 난 후 다시 보시는 것을 추천드립니다. : )