JS 3-7. 콜백함수

22. 자바스크립트 콜백함수의 개념과 예시 설명

콜백 함수(callback function)란?

자바스크립트에서 콜백 함수는 다른 함수에 인수로 전달되어,
특정 작업이 완료된 후 실행되는 함수를 말한다.
콜백 함수는 비동기 작업(예: 데이터베이스 요청, 파일 읽기, 타이머 등)에서 주로 사용되며,
함수의 실행 순서를 제어하는 데 유용하다.

---

콜백 함수의 특징

• 함수의 인수로 전달 : 콜백 함수는 다른 함수의 인수로 전달된다.
• 필요할 때 실행 : 전달된 함수는 호출된 시점에 실행.
• 동기/비동기 모두 사용 가능 : 동기적 작업(반복문 등)과
  비동기적 작업(setTimeout, fetch 등) 모두에서 사용된다.

---

콜백 함수의 구조

🖥️ javascript

function doSomething(task, callback) {
  console.log(`Doing ${task}`);
  callback(); // 전달된 콜백 함수 호출
}

doSomething("homework", function () {
  console.log("Finished homework!");
});

🖥️ 출력 :

Doing homework
Finished homework!

---

콜백 함수의 예시

1. 동기적 콜백

🖥️ javascript

function greet(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}

greet("Alice", function () {
  console.log("Welcome to the party!");
});

🖥️ 출력 : 

css

Hello, Alice
Welcome to the party!

2. 비동기적 콜백 (setTimeout)

🖥️ javascript

function delayedMessage(message, delay, callback) {
  setTimeout(() => {
    console.log(message);
    callback();
  }, delay);
}

delayedMessage("This is delayed.", 2000, function () {
  console.log("Callback executed after delay!");
});

🖥️ 출력 : (2초 후)

arduino

This is delayed.
Callback executed after delay!

3. 비동기적 콜백 (배열 처리)

🖥️ javascript

function processArray(arr, callback) {
  arr.forEach((item) => callback(item));
}

const numbers = [1, 2, 3, 4];
processArray(numbers, function (number) {
  console.log(`Processing number: ${number}`);
});

🖥️ 출력:

yaml

Processing number: 1
Processing number: 2
Processing number: 3
Processing number: 4

---

콜백 함수의 한계

콜백 함수는 "콜백 지옥(Callback Hell)"을 야기할 수 있는데, 이는 콜백 함수가 중첩되면서 코드가 읽기 어렵고 유지보수가 힘들어지는 경우를 말한다.

🖥️ javascript

setTimeout(() => {
  console.log("Step 1");
  setTimeout(() => {
    console.log("Step 2");
    setTimeout(() => {
      console.log("Step 3");
    }, 1000);
  }, 1000);
}, 1000);

이런 문제를 해결하기 위해 Promise나 async/await를 사용하는 것이 일반적이다.