[JavaScript 문법] 25일차: async/await

async/await란?

async와 await는 JavaScript에서 비동기 작업을 보다 간편하고 직관적으로 작성할 수 있도록 도와주는 구문입니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 기다립니다.

async 함수

async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환합니다. 함수 내부에서 return한 값은 자동으로 Promise.resolve로 감싸집니다.

예제

async function fetchData() {
  return 'Fetched Data';
}

fetchData().then((data) => {
  console.log(data); // 'Fetched Data'
});

await 표현식

await 키워드는 async 함수 내부에서만 사용할 수 있으며, 프로미스가 해결될 때까지 함수의 실행을 일시 중단시킵니다. await은 프로미스가 이행되면 그 결과 값을 반환하고, 거부되면 에러를 발생시킵니다.

예제

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Fetched Data');
    }, 1000);
  });
}

async function displayData() {
  const data = await fetchData();
  console.log(data); // 'Fetched Data' (1초 후 출력)
}

displayData();

async/await와 에러 처리

try...catch 문을 사용하여 async/await 구문에서 발생하는 에러를 처리할 수 있습니다.

예제

function fetchDataWithError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('Error fetching data');
    }, 1000);
  });
}

async function displayData() {
  try {
    const data = await fetchDataWithError();
    console.log(data);
  } catch (error) {
    console.error(error); // 'Error fetching data' (1초 후 출력)
  }
}

displayData();

async/await와 프로미스 체이닝

async/await을 사용하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 이는 프로미스 체이닝을 보다 간결하고 읽기 쉽게 만듭니다.

예제

function step1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Step 1 complete');
    }, 1000);
  });
}

function step2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Step 2 complete');
    }, 1000);
  });
}

function step3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Step 3 complete');
    }, 1000);
  });
}

async function executeSteps() {
  const result1 = await step1();
  console.log(result1); // 'Step 1 complete'

  const result2 = await step2();
  console.log(result2); // 'Step 2 complete'

  const result3 = await step3();
  console.log(result3); // 'Step 3 complete'
}

executeSteps();

async/await와 병렬 처리

Promise.all과 함께 사용하여 여러 비동기 작업을 병렬로 처리할 수 있습니다.

예제

function fetchData1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data 1');
    }, 1000);
  });
}

function fetchData2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data 2');
    }, 2000);
  });
}

async function displayData() {
  const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
  console.log(data1); // 'Data 1' (1초 후 출력)
  console.log(data2); // 'Data 2' (2초 후 출력)
}

displayData();

async/await의 장점과 단점

장점

1. 가독성 향상: 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 높아집니다.
2. 에러 처리 개선: try...catch 문을 사용하여 비동기 작업에서 발생하는 에러를 일관성 있게 처리할 수 있습니다.
3. 프로미스 체이닝 단순화: 복잡한 프로미스 체이닝을 간결하게 작성할 수 있습니다.

단점

1. 브라우저 호환성: 오래된 브라우저에서는 지원되지 않을 수 있습니다.
2. 디버깅 어려움: 비동기 호출 스택 추적이 어려울 수 있습니다.

결론

async/await는 비동기 작업을 처리하기 위한 강력한 도구입니다. 이를 사용하면 비동기 코드를 보다 간편하고 직관적으로 작성할 수 있습니다. 이번 글에서는 async 함수, await 표현식, 에러 처리, 프로미스 체이닝, 병렬 처리, 장점과 단점에 대해 배웠습니다. 다음 글에서는 타이머 함수에 대해 알아보겠습니다.

다음 글에서 만나요!