[Javascript] 콜백 함수란

자바스크립트에서 콜백 함수란 '파라미터로 함수를 받는 함수'라고 할 수 있다.

 

일반적인 함수의 경우에는 파라미터로 자료를 받아, 계산 후 특정 값을 반환하는데,

콜백 함수는 특정 값이 아닌 함수를 반환한다.

 

for문에서 자주 사용되는 forEach가 그것이고, 다른 예로는 setTimeout이 있다.

// 콜 백 함수 예제 1. forEach, 배열을 순회하며 배열 값 출력

number_list = [1, 2, 3, 4, 5];

number_list.forEach(function(x) {
	console.log(x);
    }
)


// 예제 2. setTimeout, 3초 뒤 문자열 출력

setTimeout(function(){
	console.log("Hi, everybody!");
    }, 3000);

A 데이터 소스에서 a 를 가져온 후 (1), B 데이터 소스의 b에 적용하여 (2), 최종 결과물 c를 산출(3)해야 한다면,

(1) 작업이 완료되기 전 (2) 작업을 시작하는 것을 방지하기 위해 '비동기 처리'를 진행하는데,

이 과정이 많아질수록 (다중 중첩 사용) 콜백이 다중으로 발생하여 코드 들여쓰기가 많아져 유지 보수가 어렵게되는 '콜백 지옥'이 발생한다.

 

// 두 수를 더하는 함수
function add(a, b, callback) {
  setTimeout(function() {
    const result = a + b;
    callback(result);
  }, 1000);
}


add(2, 3, function(sum) {
  add(sum, 4, function(product) {
    add(product, 5, function(result) {
      console.log(result); // 출력 결과: 14
    });
  });
});

 

위 현상을 해결하기 위해서는 Promise 나 async / await 과 같은 비동기 처리를 한다면

보다 가독성 있는 코드로 표현할 수 있다.

// Promise 사용
function add(a, b) {
    return new Promise((resolve, reject) => { // 처리 성공시 : resolve, 실패시 : reject
        let result = a + b;
        resolve(result);
    })
}

add(2, 3)
    .then(function(result) {
        return add(result, 4);
    })
    .then(function(result) {
        return add(result, 5);
    })
    .then(function(result) {
        console.log(result); // 출력 : 14
    })
    
// async & await 

async function add_2(){
	try {
    	let result_1 = await add(2, 3);
        let result_2 = await add(result_1, 4);
        let result_3 = await add(result_2, 5);
        console.log(result_3); // 출력 : 14
    }	catch(error){
    	console.log(error); // 에러 처리를 위해 try ~ catch 사용, 에러 발생 시 이 줄 출력
    }
}

add_2();