[Javascript] Array.map 비동기 처리로 성능 최적화하기 (async + Promise.all)

자바스크립트의 map메소드는 배열을 매핑하는 함수입니다.

배열 내 데이터를 특정 규칙으로 정제하는 방법으로 주로 사용합니다.

 

그러나 map 메소드는 배열을 전부 순회하는 O(n)의 복잡도를 가집니다.

데이터 정제 로직이 복잡하거나 배열 자체가 크다면 처리시간이 기하급수적으로 늘어날 수 있습니다.

 

때문에 map 메소드를 사용할때는 성능을 고려하며 코드를 작성해야 합니다.

이번 글에서는 async 비동기 처리로 가속할 수 있는 방법에 대해 알려드리겠습니다.

1. Async로 병렬 처리

function test() {
  const data = [1, 2, 3, 4, 5]

  const data2 = data.map(async (v) => {
    return `데이터: ${v}`
  })

  data2.forEach((v) => console.log(v))
}

test()

 

간단한 형태의 예제입니다. data.map 부분을 주의깊게 확인하세요.

 

map은 매개변수로 콜백함수를 받습니다.

그리고 받았던 콜백 함수를 순차적으로 실행합니다.

 

그렇기 때문에 async를 사용하여 순차적으로 실행되던 map을 병렬로 실행시킬 수 있습니다.

문제는 async로 map을 사용하면 데이터형이 Promise가 된다는 것입니다.

async function test() {
  const data = [1, 2, 3, 4, 5]

  const data2 = await Promise.all(
    data.map(async (v) => {
      return `데이터: ${v}`
    })
  )

  data2.forEach((v) => console.log(v))
}

test()

 

때문에 await Promise.all을 씌워줘야합니다.

Promise.all이란 배열 내 Promise들의 상태가 모두 resolve 상태가 되야 실행이 완료되는 기능입니다.

await Promise.all을 통해 내부 동작이 완료될때까지 대기합니다.

 

async는 비동기 처리이기 때문에 map에서 비동기를 처리하려면 Promise.all과 함께 사용해야 안전하게 처리할 수 있습니다.

data2에 의도한 데이터들이 할당되고 마지막으로 출력되게 됩니다.

마치며...

async를 사용하여 Array.map의 성능을 가속하는 방법에 대해 알아보았습니다.

Array.map은 실행 순서를 저장하는 기능이 내포되어 병렬처리를 하더라도 순서가 섞이지 않습니다.

 

실행 순서가 중요하지 않다면 Array.forEach 에서도 사용할 수 있는 방법입니다.

추천 포스트

[Modern][Javascript]Enum 올바르게 쓰는법 (클린코드)

[Javascript] Enum 사용하기