[JavaScript] Callback functions 콜백함수란?

콜백함수(Callback Function) 란?

콜백함수(Callback Function)는 함수의 인자로 전달되어, 해당 함수 내부에서 호출되는 함수를 말합니다. 콜백 함수는 다른 함수의 실행이 끝난 후 실행되도록 설계되어, 프로그램의 흐름을 유연하게 제어할 수 있습니다.

---

콜백 함수의 기본 사용법

아래는 콜백 함수의 간단한 예제입니다:

function main(x) {
  x();
}

function sayHi() {
  console.log("Hello");
}

main(sayHi);

이처럼 main 함수는 sayHi라는 함수를 파라미터로 전달받아 내부에서 실행합니다. 이 과정에서 sayHi 함수는 콜백 함수로 동작합니다.

---

 

다양한 콜백 함수 활용

콜백 함수는 특정 기능을 다른 함수에서 재사용하거나, 원하는 시점에 실행할 수 있게 만듭니다. 아래는 콜백 함수를 활용해 다국어로 인사를 출력하는 예제입니다:

function greetToUser(greet) {
  const name = "신규";
  greet(name);
}

function greetInKorean(name) {
  console.log(name + "님 안녕하세요"); // 신규님 안녕하세요
}

function greetInEnglish(name) {
  console.log("Hi" + name); // Hi 신규
}

greetToUser(greetInKorean);
greetToUser(greetInEnglish);

 

위 코드에서 greetToUser 함수는 다른 콜백 함수(greetInKorean 또는 greetInEnglish)를 전달받아 실행합니다. 이처럼 콜백 함수를 활용하면 함수의 동작을 유연하게 변경할 수 있습니다.

---

 

콜백 함수와 비동기 작업

콜백 함수는 특히 비동기 작업에서 유용하게 사용됩니다. 예를 들어, 아래는 setTimeout을 이용해 1초 후에 특정 작업을 수행하는 예제입니다:

setTimeout(() => {
  console.log("hello"); //hello
}, 1000);

여기서 화살표 함수 () => { console.log("hello"); }는 setTimeout 함수에 전달된 콜백 함수입니다. setTimeout 내부 구현에 따라 콜백 함수는 특정 작업이 끝난 후 실행됩니다.

 

---

콜백지옥 (Callback Hell)

비동기 작업이 반복적으로 발생하면, 코드의 가독성이 떨어지고 관리가 어려워지는 콜백 지옥 현상이 발생할 수 있습니다. 아래는 콜백 지옥의 예제입니다

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!!');
        })
    })
})

<output>
4
8
16
finish!!

 

위와 같이 콜백 함수가 중첩될수록 코드의 들여쓰기가 깊어져 가독성이 떨어지고 디버깅이 어려워질 수 있습니다.

 

해결방법으로는 Promise, async/await이 있습니다. 다음 블로그에 올리겠습니다.

---

 

결론

콜백 함수는 프로그램의 흐름을 유연하게 제어하고, 비동기 작업에서 중요한 역할을 합니다. 그러나 콜백 지옥과 같은 문제를 피하기 위해 Promise와 async/await 같은 현대적인 비동기 처리 방법을 활용하는 것이 좋습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.