[JS] map(), foreach(), (for...of)에서의 await에 대한 정리... ( map()/forEach VS Promise.all 어떤 걸 사용할까?)

 

 

 

 

서론

이번에 프로젝트를 하면서 프로미스 배열을 처리하는데

몸에 배어있는 습관처럼 map함수를 사용해서 프라미스를 처리 했다..

 

그래서 정리를 했다. map함수, forEach함수, Promise.all함수가 어떻게 다른지 조금 알고 싶었다..

그걸 알아야 상황에 맞게 어떤 함수를 사용할 지 생각을 할 수 있으니까...

 

기왕 하는김에 for.. of문법도 같이 정리해보았다.

 

각 함수들의 샘플코드

 

공통 샘플코드

const promise1 = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("통신 성공1");
    }, 2000);
  });
};

const promise2 = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("통신 성공2");
    }, 2000);
  });
};

const promise3 = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("통신 성공3");
    }, 2000);
  });
};

const promiseArr = [promise1, promise2, promise3];

 

공통 샘플코드로는 2초가 걸리는 프로미스 객체 3개를 담은 배열을 준비 했다. 위 코드로

각각 map(), forEach(), for... of를 비교하려고 한다..

 

 

map함수 샘플코드

const callPromise = async () => {
  console.time();
  promiseArr.map(async (promise) => {
    const result = await promise();
    console.log(result);
  });
  console.timeEnd();
};

callPromise();

// result
// default: 0.525ms
// 통신 성공1
// 통신 성공2
// 통신 성공3

 

map함수의 시간을 측정해보니 0.525ms가 걸렸다.

즉 await을 기다리지 않고 3번을 우선 전부 돌린 다음, 결과값을 result에 담아 콘솔에 뿌려준 걸 알 수 있다.

 

 

 

forEach함수 샘플코드

const callPromise = async () => {
  console.time();
  promiseArr.forEach(async (promise) => {
    const result = await promise();
    console.log(result);
  });
  console.timeEnd();
};

callPromise();

// result
// default: 0.615ms
// 통신 성공1
// 통신 성공2
// 통신 성공3

 

forEach함수의 시간을 측정해보니 0.615ms가 걸렸다.

즉 await을 기다리지 않고 3번을 우선 전부 돌린 다음, 결과값을 result에 담아 콘솔에 뿌려준 걸 알 수 있다.

 

 

 

for...of 샘플코드

const callPromise = async () => {
  console.time();
  for (const promise of promiseArr) {
    const result = await promise();
    console.log(result);
  }
  console.timeEnd();
};

callPromise();
// result
// 통신 성공1
// 통신 성공2
// 통신 성공3
// default: 6.019s

 

for... of의 시간을 측정해보니 6.019ms가 걸렸다.

즉 첫번째 await을 기다린후 다음 코드가 수행된 것을 알 수 있다.

 

 

결론

 

map함수나 forEach함수는 병렬처리는 아니지만, 그렇다고 동기적으로 코드를 수행하지 않기 때문에

병렬처리만큼의 성능이나 속도는 나오지 않지만 

순차적인 실행이 필요한 경우(예: 현 작업 결과를 다음 로직에 넘겨줄 때...)에는 Promise.all대신 사용 할 수 있다.

 

찐 결론

1. 성능이나 병렬처리를 요할때는 역시 Promise.all함수를 사용하자.

2. 순차적인 실행이 필요한 경우에는 map함수, forEach함수가 대안이 될 수 있다.

3. for... of 문법은 왠만하면 사용을 피하자...