콜백함수(Callback Function)

자바스크립트에서 함수는 object이다. 이 때문에 함수는 다른 함수의 인자로 쓰일 수도, 어떤 함수에 의해 return될 수도 있다.(값으로 쓸 수 있다!) 이러한 함수를 고차 함수(higher-order functions)라 부르고 인자로 넘겨지는 함수를 콜백 함수(callback function) 라고 부른다.

• callback function은 다른코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한다.

• callback function을 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 실행하게 된다.

출처 링크

사용이유

• 자바스크립트에서 비동기적 프로그래밍을 해야 할 때 사용한다.
• 비동기적 : 특정 코드를 수행하는 도중에도(수행이 끝나지 않아도) 아래줄로 내려가 다음 코드를 수행

비동기적 프로그래밍이 필요한 경우

1) 사용자 이벤트 처리

<button id="btn_addcart" onclick="btn_addcart_click();">장바구니</button>

<script>
function btn_addcart_click() {
	alert("선택하신 상품을 장바구니에 담았습니다.");
}
</script>

브라우저 화면에서 발생하는 사용자의 이벤트(ex. 버튼 클릭)는 예측이 불가능하므로 onclick과 같이 화면 이벤트를 담당하는 요소에게 특정 이벤트가 발생할 때(버튼이 클릭됐을 때) 실행했으면 하는 내용(상품을 장바구니에 담기)을 callback function에 전달한다.

2) 네트워크 응답 처리

// callback
fetchData('https://jsonplaceholder.typicode.com/users/1', function(result){
    if(result.data.id === 1){
        fetchData('https://jsonplaceholder.typicode.com/todos', function(result2){
            printTodo(result2);
        });
    }
}

// async / await
async func(){
   try{
      res = await fetchData('https://jsonplaceholder.typicode.com/users/1');
      if(res.data.id === 1){
         res = await fetchData('https://jsonplaceholder.typicode.com/todos');
         printTodo(res);
      }
   }catch(err){
       console.log(err);
   }
}

지금은 async / await를 많이 사용하지만 태초에 callback이 있었다.

3) 파일을 읽고 쓰는 등의 파일 시스템 작업

var fs = require("fs");

fs.readFile('input.txt', function (err, data) {
    if (err) return console.error(err);
    console.log(data.toString());
});

console.log("Program has ended");

// Program has ended
// 불러온 파일의 내용

readFile함수가 끝날때까지 기다리지않고 바로 그 아래에있는 console.log 코드를 실행한다. 그 다음에 readFile 함수에있던 작업이 다 끝나면 콜백함수를 호출한다.

모든 Node 어플리케이션의 비동기식 함수는 첫번째 parameter로는 error, 마지막 parameter로는 callback function을 받는다. fs.readFile() 함수는 비동기식으로 파일을 읽는 함수이고, 도중에 에러가 발생하면 err 객체에 에러 내용을 담고
그렇지 않을 시에는 파일 내용을 다 읽고 출력한다.

4) 의도적으로 시간 지연을 사용할 때 (ex. 알람)

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}

first();
second();

// 2
// 1 

first() 함수를 먼저 실행했지만, second()함수가 먼저 수행을 완료했으므로 second() -> first() 순으로 결과가 찍히게 된다.

만약 지연시킨 first() 을 기다렸다가 second()을 실행했다면 사용자는 멈춰져 있는 화면을 보게된다.
스레드의 블록킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.

여기서 중요한 점은 setTimeout처럼 비동기적으로 콜백을 호출 시켜주는 함수는, 전달된 callback function을 현재 실행중인 싱글스레드에서 뽑아내어 특정 장소에 보관하고, 특정 조건이 만족 될 때 호출이 가능하게 한다는 점이다.
setTimeout은 시간을 카운팅하는 기능 외에, 콜백함수를 비동기 영역으로 넘기는 역할을 한다.

참고 자료
[번역] JavaScript: 도대체 콜백이 뭔데?
[JavaScript] 콜백함수(Callback Function) 단계별로 이해하고 실습
Javascript - 콜백함수(Callback function)이란?
자바스크립트 - 콜백 함수
비동기 처리와 콜백함수 그리고 Promise
[Node.JS] 강좌 06편: Callback Function 개념 | VELOPERT.LOG