[JavaScript] 콜백함수 (Callback)

콜백 함수(Callback Function)는 쉽게 말하면 "나중에 불러줘!"라고 부탁하는 함수다. 특정 작업이 끝난 후 실행되는 함수로, 자바스크립트의 비동기 작업 처리에서 흔히 사용된다.

---

🔍 콜백 함수가 왜 필요할까?

자바스크립트는 싱글 스레드(Single Thread) 기반으로 실행된다. 즉, 한 번에 하나의 작업만 처리할 수 있다. 하지만 서버 요청, 타이머, 사용자 이벤트와 같은 작업은 즉시 완료되지 않고 일정 시간이 소요된다. 이러한 비동기 작업을 효율적으로 처리하기 위해 콜백 함수를 사용한다.

---

✅ 콜백 함수 실행 흐름

console.log('A');  // 동기 코드 실행

setTimeout(() => {
    console.log('B');  // 비동기 코드 (3초 후 실행)
}, 3000);

console.log('C');  // 동기 코드 실행

출력 결과:

A
C
B

📌 setTimeout()은 비동기 함수이므로, B는 3초 후 실행된다. 즉, 자바스크립트는 비동기 작업을 백그라운드에서 실행하면서 다음 코드를 계속 진행한다. 이런 흐름을 조절하는 것이 바로 콜백 함수의 역할이다.

---

🎯 콜백 함수 예시

// 콜백 함수 정의
function greeting(name) {
    console.log(`안녕하세요, ${name}님! 👋`);
}

// 콜백 함수를 실행하는 함수
function processUserInput(callback) {
    const name = "철수";
    callback(name);
}

// 콜백 함수 전달
processUserInput(greeting);

📌 greeting 함수는 processUserInput 함수가 실행된 후 나중에 호출되는 함수이다.

---

🔥 고차 함수(Higher-Order Function)와 콜백

고차 함수란 다른 함수를 매개변수로 받거나 반환하는 함수를 말한다. 콜백 함수는 보통 고차 함수와 함께 사용된다.

✅ 고차 함수 예시

function repeat(n, callback) {
    for (let i = 0; i < n; i++) {
        callback(i);
    }
}

// 콜백 함수 전달
repeat(5, function(i) {
    console.log(`반복: ${i}`);
});

📌 repeat(5, callback)을 호출하면, callback(i)이 5번 실행된다.

---

📌 배열 메서드에서 콜백 함수 활용

1️⃣ forEach()

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => {
    console.log(num * 2);
});

📌 forEach()는 배열의 각 요소에 대해 콜백 함수를 실행한다.

2️⃣ filter()

const words = ["apple", "banana", "cherry"];

const result = words.filter(word => word.length > 5);
console.log(result);  // ['banana', 'cherry']

📌 filter()는 조건을 만족하는 요소만 새로운 배열로 반환한다.

3️⃣ reduce()

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

📌 reduce()는 배열 요소를 누적하여 하나의 값으로 만든다.

---

🚩 콜백 지옥(Callback Hell)과 해결 방법

콜백 함수가 중첩되어 코드가 복잡하고 가독성이 떨어지는 현상을 콜백 지옥이라고 한다.

setTimeout(() => {
    console.log("1초 후 실행 ⏳");
    setTimeout(() => {
        console<.log("2초 후 실행 ⏳");
        setTimeout(() => {
            console.log("3초 후 실행 ⏳");
        }, 1000);
    }, 1000);
}, 1000);

📌 중첩 구조로 인해 코드 가독성이 매우 떨어진다. 이를 해결하기 위해 Promise나 async/await를 사용할 수 있다.

---

🚀 Promise와 async/await로 콜백 지옥 탈출하기

✅ Promise 사용

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

delay(1000)
    .then(() => {
        console.log("1초 후 실행 ⏳");
        return delay(1000);
    })
    .then(() => {
        console.log("2초 후 실행 ⏳");
        return delay(1000);
    })
    .then(() => {
        console.log("3초 후 실행 ⏳");
    });

✅ async/await 사용

async function run() {
    await delay(1000);
    console.log("1초 후 실행 ⏳");
    await delay(1000);
    console.log("2초 후 실행 ⏳");
    await delay(1000);
    console.log("3초 후 실행 ⏳");
}

run();

📌 async/await를 사용하면 동기 코드처럼 직관적인 코드를 작성할 수 있다.

---

👉 끝으로

✅ 콜백 함수는 비동기 처리에서 필수적인 개념이다. 하지만 콜백 지옥 문제를 방지하기 위해 Promise나 async/await를 함께 익혀야 한다. 배열 메서드(forEach, filter, reduce)에서도 자주 활용되므로, 다양한 방식으로 연습하면서 익숙해져야겠다. 💪🔥