[ 웹개발 ] callback과 async await 의 차이

Callback

• 콜백(callback)은 비동기 작업이 완료되면 실행될 함수를 인수로 받는 함수
• 콜백 함수를 사용하면 비동기 작업이 완료되기를 기다리지 않고 다른 작업을 수행할 수 있음. 이후에 비동기 작업이 완료되면 콜백 함수가 호출.
• 콜백 헬(callback hell)이라고 불리는 코드의 중첩이 발생할 수 있으며, 이는 코드의 가독성과 유지보수성을 저하시킬 수 있음.

// 콜백을 사용한 비동기 코드
function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // "Data fetched"
});

 

 

Async/Await

• Async/Await는 ES2017부터 도입된 비동기 코드를 보다 명확하고 동기적으로 작성할 수 있는 패턴이다. ( Promise를 기반으로 동작 )
• async 함수 내부에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있다. 이렇게 하면 비동기 코드를 동기적으로 작성할 수 있다.
• Async/Await은 가독성이 높고 콜백 헬을 피할 수 있으며, 예외 처리가 쉽다.

// Async/Await을 사용한 비동기 코드
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // "Data fetched"
}

getData();

 

 

정리

간단히 말하면, 콜백은 비동기 코드를 다룰 때 콜백 함수를 사용하여 처리하는 반면, Async/Await은 Promise를 기반으로 하여 비동기 코드를 동기적으로 작성할 수 있는 방법을 제공한다. Async/Await은 콜백 헬을 피하고 코드의 가독성을 높일 수 있으므로 많은 개발자들이 선호.