TIL_콜백함수

콜백 함수란 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말한다.
보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 호출한다. 콜백함수의 사용법을 알아보자.

콜백함수의 사용법

1. 함수 정의

function plus(a, b, callback) {  
  var sum = a + b;
  callback(sum);
}       

위의 plus 함수의 매개변수로 callback을 넣어주고 plus 함수 내에서 callback 매개변수를 함수 형태로 실행한다.

2. 정의한 함수 호출

   plus(1, 2, function(result) {
    console.log(result);         
   });
   // 결과 : 3

익명 함수를 매개변수로 전달하고 plus 함수를 호출한다. 함수에서 정의하고 있는 로직을 보면 a + b 가 변수 sum에 저장되고 sum이 익명 함수로 전달되어 콘솔에 출력하고 있다는 것을 알 수 있습니다. 콜백 함수가 맨 뒤에 있기 때문에 모든 로직이 처리되고 난 시점에서 콜백함수가 호출된다.

위의 예시와는 다르게 정의된(이름이 있는) 함수를 전달할 수도 있다.

function plus(a, b, callback) {
  var sum = a + b;
  callback(sum);
}

function print(result) {  // 콜백 함수로 사용할 함수 정의
  console.log(result);
}                         

plus(1, 2, print);
// 결과 : 3

콜백함수의 의의

어떤 동작이 끝나고 함수를 호출하는 거라면 그냥 순차적으로 함수를 호출하면 되지 않을까?라는 의문을 가지게 됩니다.

function plus(a, b) { 
  var sum = a + b;
  return sum;
}  

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

print(plus(1,2));

일반적인 경우 위와 같은 형태로 함수가 작성된다. print함수가 실행되기 위해선 plus함수가 실행되어야 한다. print함수는 plus함수의 실행이 끝날 때까지 기다려야 한다. 만약 plus함수의 로직이 복잡해서 처리가 늦어진다면 웹사이트는 동작을 전부 멈춰버릴 수 있다.

그러나 아래와 같이

function plus(a, b, callback) {  // plus 함수 정의
  var sum = a + b;
  callback(sum);
}

같이 끝나는 시점에 콜백함수를 호출하게 된다면, 필요한 경우에만 함수를 호출하게 되어 효율이 좋고 웹사이트에서도 여러 동작을 한번에 실시할 수 있다.

출처 :
https://webcoding.tistory.com/entry/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98%EB%9E%80