콜백 함수(callback)란? 자바스크립트 비동기 처리의 기초

by

1. 콜백 함수란?

자바스크립트에서 **콜백 함수(callback function)**는 다른 함수의 인자로 전달되어 특정 작업이 완료된 후 실행되는 함수를 의미한다. 특히 비동기 처리에서 콜백 함수는 중요한 역할을 한다.

자바스크립트는 단일 스레드(single-thread)로 동작하기 때문에 비동기 작업이 완료될 때까지 기다리지 않고, 나중에 실행될 함수(콜백)를 등록하는 방식으로 효율적인 프로그램 실행이 가능하다.

2. 콜백 함수의 기본 구조

function greet(name, callback) {
    console.log("안녕하세요, " + name + "!");
    callback();
}

function sayBye() {
    console.log("다음에 또 만나요!");
}

greet("철수", sayBye);

📌 출력 결과:

안녕하세요, 철수!
다음에 또 만나요!

설명: greet 함수가 실행된 후, sayBye 함수가 콜백으로 실행된다.

3. 콜백 함수를 활용한 비동기 처리

콜백 함수는 특히 **비동기 작업(예: API 호출, 파일 읽기, 타이머 설정 등)**에서 널리 사용된다. 대표적인 예로 setTimeout() 함수가 있다.

3.1 setTimeout()을 이용한 비동기 콜백 예제

console.log("A 실행");
setTimeout(() => {
    console.log("B 실행 (2초 후)");
}, 2000);
console.log("C 실행");

📌 출력 결과:

A 실행
C 실행
B 실행 (2초 후)

설명:

  • setTimeout() 내부의 콜백 함수는 2초 후에 실행된다.
  • 따라서 C 실행이 먼저 출력되고, 2초 후 B 실행이 출력된다.

4. 콜백 지옥(Callback Hell)이란?

콜백 함수는 비동기 작업을 관리하는 데 유용하지만, 중첩된 콜백이 많아질 경우 코드 가독성이 떨어지는 문제가 발생한다. 이를 **콜백 지옥(Callback Hell)**이라고 한다.

4.1 콜백 지옥 예제

function step1(callback) {
    setTimeout(() => {
        console.log("1단계 완료");
        callback();
    }, 1000);
}

function step2(callback) {
    setTimeout(() => {
        console.log("2단계 완료");
        callback();
    }, 1000);
}

function step3(callback) {
    setTimeout(() => {
        console.log("3단계 완료");
        callback();
    }, 1000);
}

step1(() => {
    step2(() => {
        step3(() => {
            console.log("모든 단계 완료");
        });
    });
});

📌 출력 결과:

1단계 완료
2단계 완료
3단계 완료
모든 단계 완료

문제점:

  • 중첩된 콜백이 많아질수록 코드가 복잡해지고 가독성이 떨어진다.
  • 유지보수가 어려워진다.

5. 콜백 지옥을 해결하는 방법

콜백 지옥을 해결하기 위해 등장한 방법이 Promise와 Async/Await이다.

5.1 Promise를 이용한 해결 방법

function step1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("1단계 완료");
            resolve();
        }, 1000);
    });
}

function step2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("2단계 완료");
            resolve();
        }, 1000);
    });
}

function step3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("3단계 완료");
            resolve();
        }, 1000);
    });
}

step1()
    .then(step2)
    .then(step3)
    .then(() => console.log("모든 단계 완료"));

📌 출력 결과:

1단계 완료
2단계 완료
3단계 완료
모든 단계 완료

장점:

  • .then()을 사용하여 가독성이 향상된다.
  • 비동기 작업의 흐름을 쉽게 파악할 수 있다.

6. 결론

  • 콜백 함수는 자바스크립트에서 비동기 작업을 처리하는 기본적인 방법이다.
  • 하지만 콜백 지옥이 발생하면 코드의 가독성이 떨어지고 유지보수가 어려워진다.
  • 이를 해결하기 위해 Promise와 Async/Await가 등장하였다.

다음 포스트에서는 Promise와 Async/Await을 비교 분석하여, 보다 효율적인 비동기 처리를 어떻게 할 수 있는지 살펴보겠다.

Leave a Comment