[Javascript] 콜백 함수 이해하기 (callback function)

 

Javascript Callbacks

 

콜백은 다른 함수의 파라미터로 전달되는 함수입니다.
이 콜백함수를 사용하면 함수가 파라미터로 받은 다른 함수를 호출할 수 있습니다.

 

콜백함수가 어떻게 구현되는지 간단한 예제를 봅시다.

 

간단한 계산식 후 로그를 찍는 함수 입니다.

계산기 함수(myCalculator)를 호출하여 결과를 저장한 다음, 
출력 함수(myDisplayer)를 호출하여 결과를 로그로 남깁니다.

 

 

 

📄 콜백함수를 사용하지 않은 일반함수 호출

// 출력함수
function myDisplayer(result) {
    console.log('계산결과 : ', result);
}

// 계산기함수
function myCalculator(num1, num2, callback) {
  let sum = num1 + num2;
  return sum;
}

let result = myCalculator(5, 5);
myDisplayer(result); // 계산결과 :  10

myCalculator()의 결과를 result변수에 저장하여 myDisplayer()를 호출합니다.

 

 

 

📄 콜백함수 호출

// 출력함수
function myDisplayer(result) {
    console.log('계산결과 : ', result);
}

// 계산기함수
function myCalculator(num1, num2, callback) {
  let sum = num1 + num2;
  callback(sum);
}

myCalculator(5, 5, myDisplayer); // 계산결과 :  10

myCalculator()의 세번째 인자로 myDisplayer() 함수를 전달합니다.

(함수를 파라미터로 전달할 때 괄호는 사용하지 않습니다.)

 

두 함수를 비교해보면

첫번째 예제는 계산결과를 찍기위해 2가지 함수를 호출해야 하고,

두번째 예제는 계산기함수의 처리가 끝나면 출력함수를 실행합니다.

 

이렇게 간단한 예제로 비교해보니 콜백함수를 어떻게 구현해야하는지 감이 오시죠?

처리가 끝나는 시점에서 콜백함수를 호출하는구나!

 

 

 

 

콜백, 언제 사용하는거야?

 

자바스크립트 이렇게도, 저렇게도 사용하는 다양한 방식이 있다고 알아두면 좋을 듯 하고요.

콜백함수는 특히 비동기 프로그래밍 할 때 많이 사용됩니다.

비동기로 이벤트 실행 후 결과를 받아, 그 결과값에 의해 다음 이벤트 처리를 해야할 때가 있죠?

 

 

대표적인 예로 Ajax나 js파일을 불러오거나, 내장함수인 setTimeout(), setInterval() 등이 있습니다.

setTimeout(getMessage, 1000);

function getMessage() {
    console.log('같이 자바스크립트 공부 해요.');
}

 

실무에서는 다양한 비동기를 사용하기 때문에 콜백의 개념을 알아둬야하며,
비동기로 처리받아 > 다시 콜백호출 > 콜백호출 > 콜백호출이 반복되어 
감당하기 힘들어지는 이른바 콜백지옥을 해결하기 위해 Promise 객체와 await & async 개념이 있습니다. 

다음번에 이어서 포스팅 해보겠습니다!

 

참고 : https://www.w3schools.com/js/js_callback.asp

JavaScript Callbacks