[JavaScript] 콜백함수

📌 Callback 함수란?

👉 **콜백 함수(callback function)**는 다른 함수의 인자로 전달되어 특정 조건에서 실행되는 함수입니다.

📌 Callback 함수 예제

function main(callback) {
  console.log('main 실행');
  callback(); // 전달된 함수 실행
}

main(function () {
  console.log('✅ 콜백 함수 실행');
});

✔ main() 함수는 callback을 인자로 받아 실행합니다.
✔ main()을 호출할 때 익명 함수를 전달하여 콜백 함수로 실행됩니다.

---

📌 비동기 콜백 (Asynchronous Callback)

👉 비동기 작업이 완료된 후에 실행되는 콜백 함수입니다.
👉 비동기 코드는 실행 순서가 보장되지 않기 때문에 콜백 함수를 이용해 순서를 제어할 수 있습니다.

❌ 비동기 처리 없이 실행

function getData() {
  setTimeout(() => {
    console.log('📡 데이터 가져오기 완료');
  }, 1000);
}

getData();
console.log('🚀 후처리 실행'); // 데이터보다 먼저 실행됨

✔ getData()는 1초 후에 실행되지만,
✔ console.log('🚀 후처리 실행')는 즉시 실행되므로 데이터보다 먼저 출력됩니다.

---

📌 비동기 작업을 처리하는 콜백

👉 콜백을 활용하면 데이터를 가져온 후 실행할 작업을 지정할 수 있습니다.

✅ 콜백을 사용한 비동기 작업

 function getData2(callback) {
  setTimeout(() => {
    console.log('📡 데이터 가져오기 완료');
    callback({ data1: '✅ 데이터' }); // 데이터 처리 후 콜백 실행
  }, 1000);
}

getData2((data) => {
  console.log(data.data1); // 데이터 출력
});

✔ getData2()가 완료된 후 콜백을 실행하여 데이터를 표시합니다.
✔ 이 방식은 비동기 작업이 순서대로 실행되도록 보장합니다.

---

🚨 콜백 지옥 (Callback Hell)

👉 콜백이 계속 중첩되면 코드가 읽기 어렵고 유지보수하기 어려워집니다.
👉 이를 **콜백 지옥(Callback Hell)**이라고 합니다.

❌ 콜백 지옥 예제

function step1(callback) {
  setTimeout(() => {
    console.log('📌 Step 1 완료');
    callback();
  }, 1000);
}

function step2(callback) {
  setTimeout(() => {
    console.log('📌 Step 2 완료');
    callback();
  }, 1000);
}

function step3(callback) {
  setTimeout(() => {
    console.log('📌 Step 3 완료');
    callback();
  }, 1000);
}

// 콜백 지옥 발생
step1(() => {
  step2(() => {
    step3(() => {
      console.log('🎉 모든 작업 완료');
    });
  });
});

✔ 들여쓰기가 깊어지고, 코드가 복잡해져서 가독성이 떨어집니다.
✔ 이러한 문제를 해결하기 위해 Promise를 사용합니다.

---

🚀 콜백 지옥 해결: Promise 사용

👉 Promise를 사용하면 가독성을 높이고 비동기 처리를 순차적으로 실행할 수 있습니다.

function step1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('📌 Step 1 완료');
      resolve();
    }, 1000);
  });
}

function step2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('📌 Step 2 완료');
      resolve();
    }, 1000);
  });
}

function step3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('📌 Step 3 완료');
      resolve();
    }, 1000);
  });
}

// Promise 체이닝을 활용한 비동기 처리
step1()
  .then(step2)
  .then(step3)
  .then(() => {
    console.log('🎉 모든 작업 완료');
  });

✔ .then() 체이닝을 사용하면 콜백 지옥 없이 비동기 처리를 순차적으로 실행할 수 있습니다.
✔ 코드가 간결하고 가독성이 좋아집니다.

---

🚀 최신 방식: async / await

👉 async / await를 사용하면 더 직관적인 코드를 작성할 수 있습니다.

async function processSteps() {
  await step1();
  await step2();
  await step3();
  console.log('🎉 모든 작업 완료');
}

processSteps();

✔ await을 사용하면 마치 동기 코드처럼 비동기 작업을 실행할 수 있습니다.
✔ async 함수 내부에서 await을 사용하면 코드의 흐름이 직관적이 됩니다.

---

📌 정리

• 콜백 함수 → 다른 함수의 인자로 전달되어 실행되는 함수
• 비동기 콜백 → 비동기 작업이 완료된 후 실행되는 함수
• 콜백 지옥 → 콜백이 중첩되어 코드가 복잡해지는 현상
• Promise → 콜백 지옥을 해결하기 위한 객체 (.then() 체이닝)
• async / await → Promise를 더 쉽게 사용할 수 있도록 도와주는 최신 문법

📢 콜백보다 Promise 또는 async/await을 활용하면 코드가 더 읽기 쉽고 유지보수가 편리합니다! 🚀

---

// callback 함수: 다른 함수의 인자로 전달되는 함수
function main(callback) {
  callback();
}
// main에 인자로 전달되는 함수가 callback 함수다.
main(function () {});
main(() => {});

// 비동기 콜백: 비동기의 경우 코드의 실행 순서가 뒤죽박죽 될 수 있으므로 비동기 콜백을 사용해서
// 차례대로 다음 함수가 실행되도록한다.
// 서버 -> 비동기작업 -> 다음작업 -> 후처리
function getData() {
  setTimeout(() => {
    console.log('data');
  }, 1000);
}
getData();
console.log('후처리');
// 위의 경우 데이터를 받아오기 전에 다음 작업을 실행하게 된다.

function getData2(callback) {
  setTimeout(() => {
    console.log('data');
    callback({ data1: 'data' });
  }, 1000);
}
getData2((data) => {
  console.log(data.data1);
});
// 위의 경우 getData2에서 data를 표시한 후 data1 객체를 받아오고 data1의 값을 표시한다.
// 위 같은 경우가 반복되면 콜백 지옥에 빠지게 된다. 이때 promise를 사용하면 된다.​