Callback 함수는 어떻게, 그리고 왜 사용되는가?

콜백(callback) 함수는 전달인자(argument)로 다른 함수에 전달되는 함수이다. 그게 무슨 말일까?

 

콜백 함수가 뭔지, 왜 쓰이는지 차근차근 알아가보자.

function eat(){
console.log("eat");
}

function rest(){
console.log("rest");
}

function run(){
console.log("run");
}

 

eat, rest, 그리고 run라는 함수가 있다.

먼저, 일반 함수 예시를 보자.

 

1. 일반 함수

function checkIfEmpty(stomach){
	if (stomach === "empty"){
   		eat(); 
    }
    else {
    	rest();
    }
}

checkIfEmpty("empty");  // eat
checkIfEmpty("full");  // rest

배고프면 먹고(eat), 배가 차면 쉰다(rest)는 내용을 출력한다.

하지만 배가 차면 쉬는 것이 아니라, 달리라(run)는 내용을 출력하고 싶다면?

checkIfEmpty에서 if조건문과 출력부분을 수정해주어야하는 번거로움이 있다.

 

2. 콜백 함수

JavaScript에서는 전달인자에 일반 변수나 값 말고도 함수 자체를 전달할 수 있기에 가능한 방식이다.

function checkIfEmpty(stomach, emptyCall, fullCall){
	if(stomach === "empty"){
    	emptyCall();
    }
    else {
    	fullCall();
    }
}

checkIfEmpty("empty", eat, rest) // eat
checkIfEmpty("full", eat, run) // run

 

이런 식으로 배의 상태(stomach)가 full일 때와 empty일 때 각각 해야하는 함수를 eat, rest, run 중 골라서 지정해줄 수 있다는 점에서 코드의 재사용성과 유지보수성이 좋다.

 

---

위의 예시만 보면 callback 함수가 유용해 보이지만 꼭 필요한가?에 대한 설명으로는 부족하다.

 

JavaScript에서는 코드를 일반적으론 위에서 아래로 순차적으로 실행을 하는데,

코드가 다른 행위가 일어난 뒤에 실행되거나 순차적으로 실행되지 않는 비동기 프로그래밍이 이루어질 때도 있다.

 

Callback 함수는 특정 작업이 완료된 후에 실행하도록 설계되어 있기에, 비동기 작업(네트워크 요청, 읽기, 쓰기)을 처리할 때 해당 작업이 수행되고 난 후에 쓰기 적합하다. 아래는 예시이다.

// 비동기 작업
function fetchData(url, callback) {
...
}

// 데이터 처리 콜백
function processData(data) {
	console.log("Data is: ", data)
}

// 데이터 가져오기, 처리
const apiUrl = "..."
fetchData(apiUrl, processData)

 

특정 작업이 완료된 후에 실행할 수 있다는 점은 코드 순서 제어라는 장점도 있다. 간단한 예로 3초(3000ms)뒤에 메세지를 출력하는 경우가 있겠다.

setTimeout(function() {
    console.log("This message is shown after 3 seconds");
}, 3000);

 

---

결론:

콜백함수는

1. 비동기 작업 처리에 도움을 주고

2. 코드 실행 순서 제어에 도움을 주고

3. 코드의 재사용성, 유지보수성이 좋다.