Javascript 비동기처리란?

자바스크립트에서 비동기 처리는 크게 콜백(Callback), 프로미스(Promise), async/await으로 구현됩니다.

1. Callback(콜백)

함수 실행 결과를 다른 함수의 인자로 전달하여 비동기 처리를 구현하는 방법입니다. 하지만 콜백 지옥(Callback Hell)이 발생할 수 있어 코드 가독성이 좋지 않습니다.

Callback 예시

function getData(callback) {
  setTimeout(() => {
    callback("데이터 수신");
  }, 1000);
}

getData((data) => {
  console.log(data);
});

2. Promise(프로미스)

비동기 처리를 더 간결하고 가독성 좋게 구현할 수 있는 방법입니다. 프로미스는 비동기 처리 결과를 나타내는 객체로, 성공과 실패의 두 가지 상태를 가지며, 이를 이용하여 처리 결과를 반환합니다.

Promise 예시

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 수신");
    }, 1000);
  });
}

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

3. async/await

async 함수는 내부에 비동기 처리를 포함할 수 있으며, await 키워드를 사용하여 비동기 처리가 완료될 때까지 대기할 수 있습니다. async/await을 사용하면 콜백 지옥과 then 메소드 체이닝의 문제를 해결할 수 있습니다.

async/await 예시

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 수신");
    }, 1000);
  });
}

async function printData() {
  const data = await getData();
  console.log(data);
}

printData();

Promise와 async/await의 차이

Promise와 async/await의 가장 큰 차이점은 코드의 가독성입니다. async/await을 사용하면 코드가 동기적인 구조처럼 보이기 때문에 코드의 가독성이 좋아지고 유지보수가 용이합니다.

또한, 오류 처리도 try-catch 문으로 처리할 수 있어 코드가 더욱 안전해집니다.
반면, Promise는 비동기 처리를 좀 더 명시적으로 표현할 수 있어서 Promise의 성질을 활용하는 작업들은 Promise를 사용하는 것이 더욱 적합할 수 있습니다.