javascript의 안티패턴 - async & map

요즘 비싼 온라인 강의를 듣고있다. 한 8만원 주고 5개월 전에 산 것 같다. ㅎ

최근 나도 사용했던 안티 패턴을 강의를 통해 알게되서 한 번 정리해 보려고 한다.

아마 많은 분들께선 올바르게 쓰고 계실 것이라서 소개하기 부끄럽다.

혹시나 본인 처럼 쓰시는 분들을 위해 아래 글은 facebook의 -그- 아저씨 처럼 써보았다.

말투가 많이 불편하다면 쪽지 ㄲ 해주세요 ㅋ

---

map, forEach등 Array 함수의 util에서 사용하는 async

우리는 때때로 비동기 동작을 하는 (함수 | 컴포넌트 | 객체)들을 map에 넣고 돌릴 때가 있다.

그 코드는 적나라하게 표현하면 아래와 같을 것이다.

[promise1, promise2].map(promiseObj => {
    // 비동기 동작
  }
}
  

우리는 각각의 객체가 resolve 상태일 때 map 내부의 비동기 코드가 동작하길 원한다.

 

그래서 우리들은 async/await를 다음처럼 사용한다.

[promise1, promise2].map(async promiseObj => {
    // 비동기 동작
    await ...
  }
}

이것이 잘 동작하는가? 그렇다면 당신의 promise는 운이 좋다고 할 수 있다.

왜 운이 좋다고 표현했을까? map과 async/await를 잘 생각하면 답이 나온다.

 

 map 함수는 array element에 대한 함수의 실행결과로 새로운 array를 만드는 함수다. map에서 도는 함수도 함수이기 때문에 새로운 맥락을 가진다. async/await는 어찌되었건 promise 객체를 리턴한다. 따라서 위의 map의 각 element의 결과는 async/await에 의해 promise 객체가 된다. 위 코드의 실행결과로 생성된 array는 다음과 같을 것이다.

[ promiseObj1, promiseObj2 ]

즉, 실행 순서가 어떻게 될지 모른다. 그냥 운이 좋아서 (cpu, memory, net work 등등의 상황이 맞아서) 순서대로 돈거다.

 

이제 위와 같은 코드패턴을 보면 일단 의도를 물어보자. 일부로 이렇게 했을 가능성도 있으니까. 하지만 만약 순서대로 비동기 함수를 실행시키고자 저렇게 코드를 썼다면, 'for, for of'라는 방법을 추천해주기 바란다.