Promise.all & .map() 조합

자바스크립트에서 .map( )은 그 자체로 체이닝을 할 수 없다. .map( )의 요소 하나씩 반복적으로 계산되며, 각 계산마다 Promise로 반환값을 받아내려면 외부 함수를 사용해야 한다. 그리고 .map( )이후의 콜백을 실행하려면 결국 Promise.all이 필요하다. 

 

const testFunc = (arr, val, cb) => {       let testArr = [];       arr.map( data => {           let result = outFunc(data)//data값 계산           testArr = [...testArr, result ]       })   }

[ map 예시 ]

 

 

위의 코드에서 testArr배열에 쌓여있는 데이터를 cb함수에 보낸다고 가정해보자. testArr배열을 testFunc함수 밖으로 옮겨, 전역변수로 사용하는 방법이 있을 것이다. 외부 함수를 통해 testArr값을 뽑아내는 방법도 가능하다. 그러나 외부함수를 생성하거나 변수를 Scope범위 밖으로 이동하는 방식은 코드를 장황하게 만든다. Promise.all( )은 이와 같은 고민을 단번에 해결해준다.

 

const testFunc = (arr, val, cb) => {         let testArr = [];             Promise.all(arr.map( data => {             let result = outFunc(data)//data값 계산             testArr = [...testArr, result ]         })).then(() => {             cb(testArr);         })     }

[ Promise.all & .map조합 ]

 

 

위와 같이 .map( )구문을 Promise.all( ) Scope로 묶어버리면 .then( )을 통해 testArr배열을 처리할 수 있다. 간단한 해결책이지만 분산된 데이터를 한꺼번에 모아서 계산하는 상황에서 유용하게 사용할 수 있다.