자바스크립트 async/await를 이용한 자료 구조 처리

10 Sep 2023

javascript

자바스크립트에서 비동기 코드를 처리하는데는 다양한 방법이 있습니다. 그 중에서도 async와 await 키워드를 사용하면 비동기 코드를 보다 간결하고 가독성있게 작성할 수 있습니다. 이번 글에서는 자바스크립트의 async/await를 이용하여 자료 구조를 처리하는 방법에 대해 알아보겠습니다.

1. 배열의 비동기 순회

async/await를 이용하여 배열을 비동기적으로 순회하는 것은 매우 간단합니다. 일반적인 for 루프와 async/await를 조합하여 사용할 수 있습니다. 아래의 코드를 참고해 보세요.

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const processArray = async (arr) => {
  for (let i = 0; i < arr.length; i++) {
    await delay(1000); // 1초 딜레이
    console.log(arr[i]);
  }
}

const myArray = [1, 2, 3, 4, 5];
processArray(myArray);

위의 예제에서는 processArray 함수와 delay 함수를 사용하여 배열을 비동기적으로 순회하고, 각 요소를 1초마다 출력합니다. await 키워드를 사용하여 delay 함수가 완료될 때까지 기다린 후, 다음 요소를 처리합니다.

2. 비동기 자료 구조 사용하기

async/await를 이용하여 비동기 자료 구조를 처리할 수도 있습니다. 예를 들어, Promise를 반환하는 비동기 함수들을 사용하여 연결 리스트를 처리할 수 있습니다. 아래의 코드는 비동기 연결 리스트를 생성하고, await 키워드를 사용하여 각 노드의 값을 출력하는 예제입니다.

class Node {
  constructor(value, next) {
    this.value = value;
    this.next = next;
  }
}

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const processLinkedList = async (node) => {
  while (node) {
    await delay(1000); // 1초 딜레이
    console.log(node.value);
    node = node.next;
  }
}

const node3 = new Node(3, null);
const node2 = new Node(2, node3);
const node1 = new Node(1, node2);

processLinkedList(node1);

위의 예제에서는 Node 클래스를 사용하여 간단한 연결 리스트를 생성하고, processLinkedList 함수에서 await 키워드를 사용하여 각 노드의 값을 1초마다 출력합니다.

3. 병렬 실행과 에러 처리

async/await를 사용하는 것은 병렬 실행과 에러 처리를 더욱 간단하게 만들어 줍니다. 여러 개의 비동기 작업을 병렬로 실행하고, 각 작업의 결과를 기다리면서 에러를 처리할 수 있습니다.

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const executeAsyncTask = async () => {
  try {
    const result1 = await asyncTask1();
    console.log(result1);
    
    const result2 = await asyncTask2();
    console.log(result2);
  } catch (error) {
    console.error(error);
  }
}

const asyncTask1 = async () => {
  await delay(1000); // 1초 딜레이
  return 'Task 1 completed';
}

const asyncTask2 = async () => {
  await delay(2000); // 2초 딜레이
  throw new Error('Task 2 failed');
}

executeAsyncTask();

위의 예제에서는 executeAsyncTask 함수에서 asyncTask1과 asyncTask2 함수를 병렬로 실행하고, 각 결과를 출력합니다. 또한, try-catch 구문을 사용하여 각 작업의 에러를 처리합니다.

마무리

이번 글에서는 자바스크립트의 async/await를 이용하여 자료 구조를 처리하는 방법에 대해 알아보았습니다. async/await를 사용하면 비동기 코드를 보다 간결하고 가독성있게 작성할 수 있으며, 병렬 실행과 에러 처리도 보다 간단히 할 수 있습니다. 여러분의 코드에 async/await를 적용하여 자료 구조 처리를 효율적으로 해보세요!