Callback 콜백 함수 예제를 통한 개념, 용도 쉽게 이해하기 - JavaScript

JavaScript - Callback 콜백함수란?

파라미터로 함수를 전달하는 함수를 callback 함수라고 부른다.

보통의 함수는 아래와 같이 생성, 사용된다.

var 인자 = "Hello World";
var 함수 = function(인자){
	console.log(인자);
};
함수(인자);
// 실행 결과 : "Hello World"

그런데 인자에 함수값이 들어갈 수 있고, 이럴 경우에는 인자로 전달된 함수[콜백함수]가 아래 [함수]라는 함수에서 실행된다.

var 콜백함수 = function(인자){
	return 인자*2;
}
var 함수 = function(인자){
	console.log(인자);
}
함수(콜백함수(2));
// 실행결과 : 4

---

어떤 상황에서 Callback 콜백함수를 사용할까?

1. 가독성이나 코드 재사용성 측면
2. 함수의 실행 순서를 지정 : a 함수의 출력 결과를 b함수가 인자로써 이용하게 끔
   • 순차적으로 실행하고 싶을 때 쓴다.
   • 전달 받은 즉시 실행이 될 필요가 없을 때, 사용한다.
   • 혹은 즉시 실행을 피하고 싶을 때. 마치 전달받은 함수가 이미 콜백함수를 내부에서 정의 한 것처럼 사용된다.

// 콜백 함수가 사용되지 않은 경우
function buysum(a, b) {
    console.log("입력한 " +a+"와 "+b + "를 더합니다."); // 1번째로 실행 
    setTimeout(function(a, b) {
        console.log("계산이 진행중."); // 3번째로 실행
        var total = a + b;
        console.log("구매 갯수 : "+ total); // 4번째로 실행
        return total;
    }, 1000);
}
console.log("총 구매 갯수는 : "+buysum(1,2)) // 2번째로 실행

// 실행 결과

// 입력한 1와 2를 더합니다.
// 총 구매 갯수는 : undefined
// 계산이 진행중.
// 구매 갯수 : 3

// 콜백 함수가 사용된 경우
function buysumCallback(a, b, callback) {
    console.log("입력한 " +a+"와 "+b + "를 더합니다."); // 1번째로 실행
    setTimeout(function() {
        console.log("계산이 진행중."); // 2번째로 실행
        var total = a + b;
        console.log("구매 갯수 : "+ total); // 3번째로 실행
        callback("총 구매 갯수는 : "+ total); // 4번째로 실행
        return total;
    }, 1000);
}

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

buysumCallback(1,2,print);

// 실행 결과
// 입력한 1와 2를 더합니다.
// 계산이 진행중.
// 구매 갯수 : 3
// 총 구매 갯수는 : 3

 

다른 함수의 인자로 콜백함수를 전달할 때 & 전달받은 함수의 특정시점에 그 콜백함수가 동작 한다.

보통의 함수에서는 인자를 전달받는다.

= 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.

---

Callback 콜백 함수를 만드는 방법

아래의 callback인자 처럼 넣고, 해당 콜백함수가 실행되는 구문에서는 ()를 붙여준다.

함수에 필요한 인자를 전달한다.

// 콜백 함수가 사용된 경우
function buysumCallback(a, b, callback) {
    console.log("입력한 " +a+"와 "+b + "를 더합니다."); // 1번째로 실행
    setTimeout(function() {
        console.log("계산이 진행중."); // 2번째로 실행
        var total = a + b;
        console.log("구매 갯수 : "+ total); // 3번째로 실행
        callback("총 구매 갯수는 : "+ total); // 4번째로 실행
        return total;
    }, 1000);
}

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

buysumCallback(1,2,print);

// 실행 결과
// 입력한 1와 2를 더합니다.
// 계산이 진행중.
// 구매 갯수 : 3
// 총 구매 갯수는 : 3

 

https://velog.io/@minidoo/자바스크립트-콜백-함수Callback-Function

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

https://www.youtube.com/watch?v=-iZlNnTGotk