비동기 처리는 자바스크립트에서 매우 중요한 개념입니다. 동기적인 방식으로 코드를 실행하면 작업이 끝날 때까지 다른 작업을 수행할 수 없어서 프로그램의 동작이 멈추게 될 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트에서는 비동기 처리를 지원하고 있습니다. 이번 포스트에서는 비동기 처리를 위한 Promise와 async/await에 대해 알아보겠습니다.

Promise

Promise는 자바스크립트에서 비동기 처리를 위한 객체입니다. 비동기 작업을 수행할 때 결과값을 약속(promise)해주는 역할을 합니다. Promise는 세 가지 상태를 가지고 있습니다.

• Pending: 초기 상태로 약속이 실행 중인 상태입니다.
• Fulfilled: 약속이 성공적으로 이행된 상태입니다.
• Rejected: 약속이 거부된 상태입니다.

Promise는 다음과 같은 방식으로 사용됩니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 작업이 성공적으로 완료되면 resolve 호출
  // 작업이 실패하면 reject 호출
});

promise
  .then((result) => {
    // 작업이 성공적으로 완료되면 호출
  })
  .catch((error) => {
    // 작업이 실패하면 호출
  })
  .finally(() => {
    // 작업이 완료된 후 항상 호출
  });

async/await

async/await는 Promise를 더욱 간편하고 가독성 좋게 사용할 수 있도록 해주는 문법입니다. async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 이행될 때까지 코드의 실행을 일시 정지합니다.

예를 들어, 다음과 같이 async/await를 사용하여 비동기 작업을 처리할 수 있습니다.

async function doSomething() {
  try {
    const result = await promise; // promise가 이행될 때까지 기다림
    // 결과를 처리하는 작업
  } catch (error) {
    // 에러 처리 작업
  } finally {
    // 항상 실행되는 작업
  }
}

doSomething();

결론

비동기 처리는 자바스크립트에서 매우 중요하며, Promise와 async/await는 이를 더욱 편리하게 처리할 수 있도록 도와줍니다. 비동기 작업을 수행할 때는 Promise나 async/await를 적절히 활용하여 코드를 관리하고 가독성을 높이는 것이 좋습니다.

참고 자료:

• MDN Web Docs - Promise
• MDN Web Docs - async function
• MDN Web Docs - await