콜백함수, 프로미스, async/await 차이점과 예제 정리 (자바스크립트 비동기 처리)

콜백 함수, 프로미스, async/await는 비동기 처리를 다루는 대표적인 방식이야. 각각 어떻게 쓰이고, 어떤 차이가 있는지 간단하게 정리해볼게.

---

✅ 1. 콜백 함수 (Callback)

📌 개념

함수를 인자로 전달해서, 나중에 실행되는 함수. 가장 기본적인 비동기 처리 방식.

📦 특징

• 코드 흐름이 꼬이기 쉬움 → 콜백 지옥(callback hell)
• 중첩이 많아지면 가독성 나빠짐

💡 예제

function orderFood(cb) {
  setTimeout(() => {
    const food = "Pizza";
    cb(food); // 여기서 호출됨
  }, 1000);
}

orderFood((food) => {
  console.log("받은 음식:", food);
});

---

✅ 2. 프로미스 (Promise)

📌 개념

비동기 작업의 성공(resolve) 또는 실패(reject) 를 약속(promise) 하는 객체.

📦 특징

• .then()으로 결과 처리
• .catch()로 에러 처리
• 콜백 지옥 해결 가능

💡 예제

function orderFood() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const food = "Burger";
      resolve(food);
    }, 1000);
  });
}

orderFood()
  .then((food) => console.log("받은 음식:", food))
  .catch((err) => console.error(err));

---

✅ 3. async / await

📌 개념

Promise 기반 코드를 동기 코드처럼 깔끔하게 작성할 수 있게 도와주는 문법.

📦 특징

• await 키워드로 프로미스가 끝날 때까지 기다림
• 에러는 try...catch로 처리
• 가독성이 매우 좋음

💡 예제

async function getFood() {
  try {
    const food = await orderFood(); // orderFood는 Promise 반환
    console.log("받은 음식:", food);
  } catch (err) {
    console.error("에러 발생:", err);
  }
}
getFood();