콜백 함수(Callback Function)의 개념 및 사용법

1. 콜백 함수(Callback function)란 ?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
콜백 함수란 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수입니다. (출처 : mdn web docs)

콜백(callback) 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. (출처 : 위키백과)

콜백 함수를 쉽고 정확하게 정의하자면 '파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수', '어떤 이벤트에 의해 호출되어지는 함수'이다.

 

function greeting(name) { // 콜백 함수
  alert(`Hello, ${name}`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name); // 동기식 콜백
}

processUserInput(greeting);

위 코드는 동기식 콜백이다. 콜백 함수는 비동기 작업이 완료된 후 코드 실행을 계속하기 위해 자주 사용되는데, 이를 비동기식 콜백이라고 한다.

ex) Promise 의 excutor 함수, excutor의 resolve, reject 함수

 

 

2. 콜백 함수의 사용 원칙

• 익명 함수(Anonymous Function) 사용

let number = [1, 2, 3, 4, 5];
 
number.forEach(function(x) {
    console.log(x * 2);
});

• 함수의 이름만 넘기기

function whatYourName(name, callback) {
    console.log('name: ', name);
    callback();
}
 
function finishFunc() {
    console.log('finish function');
}
 
whatYourName('miniddo', finishFunc);
 
/*
name: miniddo
finish function
*/

• 전역/지역 변수를 콜백함수의 파라미터로 전달

let fruit = 'apple';	// Global Variable
 
function callbackFunc(callback) {
    let vegetable = 'tomato';	// Local Variable
    callback(vegetable);
}
 
function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}
 
callbackFunc(eat);
 
// fruit: apple / vegetable: tomato

 

3. 콜백 지옥이란 ?

function add(x, callback) {
    let sum = x + x;
    console.log(sum);
    callback(sum);
}
 
add(2, function(result) {
    add(result, function(result) {
        add(result, function(result) {
            console.log('finish!!');
        })
    })
})
 
/*
4
8
16
finish!!
*/

콜백 지옥이란 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.

→ 비동기 호출이 자주 일어나는 프로그램의 경우 콜백 지옥이 발생한다.(Promise와 async/await으로 해결 가능, 추후에 포스팅 예정)

 

비동기 함수를 호출할 때는 결과값을 리턴 받으려고 하지말고, 결과값을 통해 처리할 로직을 '콜백 함수'로 넘기는 스타일로 코딩을 해줘야 예상된 결과를 얻을 수 있습니다.

 

하지만 자바스크립트 프로젝트가 점점 더 복잡해지면서 최근에는 콜백 함수를 인자로 넘겨서 비동기 처리를 하는 스타일을 피하는 추세입니다.  왜냐하면 콜백 함수를 중첩해서 사용하게 되면 계속해서 코드를 들여쓰기 해야하고 그러다보면 코드 가독성이 현저하게 떨어지게 되기 때문입니다.

 

결국, 많은 개발자들이 콜백 지옥이라고 불리는 끔찍한 상황을 겪게 되었고 최근에는 Promise나 async/await를 사용해서 코드 가독성을 해치지 않으면서 비동기 처리하는 방법들로 대체되고 있습니다.