이터레이터를 사용하면 JavaScript에서 비동기 데이터를 처리하고 반복할 수 있습니다. 이터레이터는 데이터를 순회하고 처리하는 데 유용한 도구입니다. 비동기 데이터를 처리하는 가장 일반적인 상황은 Promise를 반환하는 API 호출입니다. 이 제약을 해결하기 위해 JavaScript는 async/await를 도입하여 비동기 코드를 좀 더 간결하고 읽기 쉽게 만들었습니다.

1. 이터레이터를 이용한 비동기 데이터 처리

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

async function processData() {
  const data = await getData();
  // 데이터 처리 로직 작성
}

processData();

위의 예제에서 getData 함수는 비동기로 데이터를 가져오는 API 호출을 수행합니다. await 키워드를 사용하여 데이터가 반환될 때까지 대기하고, 데이터가 반환되면 JSON 형식으로 파싱하여 data 변수에 저장합니다. 이후 processData 함수에서는 data를 활용하여 데이터 처리 로직을 작성할 수 있습니다.

2. 이터레이터를 이용한 데이터 반복

이터레이터를 사용하여 비동기 데이터를 반복할 수도 있습니다. Symbol.asyncIterator 메서드를 사용하여 이터러블 객체를 만들고, for-await-of 루프를 사용하여 각 데이터를 순회합니다.

async function* getData() {
  for (let i = 0; i < 10; i++) {
    yield new Promise((resolve) => setTimeout(resolve, 1000, i));
  }
}

async function processData() {
  for await (const data of getData()) {
    console.log(data);
  }
}

processData();

위의 예제에서 getData 함수는 0부터 9까지의 숫자를 1초마다 반환하는 Promise를 생성하여 제너레이터를 생성합니다. processData 함수에서는 for-await-of 루프를 사용하여 각 데이터를 비동기적으로 순회하고 결과를 출력합니다.

결론

JavaScript에서 이터레이터를 사용하여 비동기 데이터를 처리하고 반복하는 방법을 살펴보았습니다. async/await를 사용하면 비동기 코드를 더 쉽게 작성할 수 있으며, 이터레이터를 활용하여 데이터를 순회하고 처리할 수 있습니다. 이를 통해 JavaScript 애플리케이션에서 비동기 작업을 더욱 효율적으로 다룰 수 있습니다.

#javascript #비동기 #이터레이터