javascript 비동기 프로그래밍 : Callback, Promise, 그리고 Async/Await

| 1 min read

얼마 전 "Node.js 백엔드 개발자 되기" 책의 저자이신 박승규님이 진행하시는 Node.js 스터디에서 javascript의 비동기 프로그래밍에 대해 발표하였습니다.

사용했던 발표자료

1. Callback

초기 JavaScript에서는 (그리고 다른 오래된 언어들에서도) 비동기 작업을 처리하기 위해 콜백 함수를 사용했습니다. 콜백 함수는 비동기 작업이 완료되면 호출되는 함수입니다.

setTimeout(function() {
  console.log('Hello World');
}, 3000);

콜백 함수는 간단하고 직관적이지만, 중첩이 깊어질수록 코드가 복잡해지는 문제가 있습니다. 이를 '콜백 지옥'이라고 합니다.

2. Promise

ES6에서 도입된 Promise는 콜백 지옥 문제를 해결하기 위해 등장했습니다. Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Promise는 값처럼 다룰 수 있어 적용하면 코드가 더 읽기 쉽고 유지보수가 용이해집니다. 그러나 Promise 체인이 길어지면 여전히 코드가 복잡해질 수 있습니다.

3. Async/Await

ES8에서 도입된 Async/Await는 Promise를 기반으로 하지만, 더 간결하고 동기식처럼 코드 작성이 가능합니다.

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();