async/await

JavaScript는 싱글 스레드 언어입니다. 이 말은 하나의 작업만을 동시에 처리할 수 있다는 것입니다. 하지만 JavaScript는 이러한 한계를 극복하기 위해 비동기 처리를 지원합니다. 비동기 처리란, 어떤 작업이 끝날 때까지 기다리지 않고 다른 작업을 처리할 수 있는 것을 말합니다.

비동기 처리를 위한 방법으로는 콜백, 프로미스, async/await 등이 있습니다. 콜백은 함수의 인자로 다른 함수를 전달하여 비동기 작업이 끝나면 호출되는 방식입니다. 프로미스는 비동기 작업을 수행하고, 성공 또는 실패 시 콜백 함수를 호출하는 객체입니다. async/await는 ES8에서 추가된 문법으로, async 함수를 사용하여 비동기 작업을 처리하고 await 키워드를 사용하여 결과를 기다리는 방식입니다.

async/await는 프로미스보다 간단하게 비동기 작업을 처리할 수 있으며, 가독성이 좋아서 코드를 이해하기 쉽습니다.
예를 들어, 비동기 작업을 순서대로 처리할 때 프로미스를 사용하면 then 메서드를 연속해서 사용해야 하므로 코드가 길어집니다. 그러나 async/await를 사용하면 코드가 간결해집니다.

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    const transformedData = await transformData(data);
    const filteredData = await filterData(transformedData);
    const sortedData = await sortData(filteredData);
    const formattedData = await formatData(sortedData);
    return formattedData;
  } catch (error) {
    console.error('데이터 가져오기 중 오류가 발생했습니다.', error);
    throw error;
  }
};

const transformData = async (data) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const transformed = data.map((item) => ({
        id: item.id,
        name: item.name.toUpperCase(),
        description: item.description.toLowerCase(),
      }));
      resolve(transformed);
    }, 1000);
  });
};

const filterData = async (data) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const filtered = data.filter((item) => item.name.includes('EXAMPLE'));
      resolve(filtered);
    }, 1000);
  });
};

const sortData = async (data) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const sorted = data.sort((a, b) => a.id - b.id);
      resolve(sorted);
    }, 1000);
  });
};

const formatData = async (data) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const formatted = data.map((item) => `${item.id} - ${item.name} - ${item.description}`);
      resolve(formatted);
    }, 1000);
  });
};

(async () => {
  const result = await fetchData();
  console.log(result);
})();

이러한 개념을 이해한 뒤에는, 위와 같은 async/await 예제를 살펴보면서 이해할 수 있습니다. 예제에서는 async 함수를 사용하여 비동기 작업을 처리하고, await 키워드를 사용하여 결과를 기다리는 것을 볼 수 있습니다. 이를 통해 코드의 가독성을 높이고, 비동기 작업을 보다 쉽게 처리할 수 있습니다.