map 안에서 async/await 사용시 Promise가 리턴되는 문제

const arr = [1,2,3,4];

const result = arr.map(async (item) => {
	await sampleFunction(item);
})

function sampleFunction(item) {
    return item + 1;
}

console.log(result); // [2, 3, 4, 5]를 리턴할 것 같지만
/**
[ Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> } ] 를 리턴한다.
  */

map 안에서 async/await을 사용했을 때, return값으로 Promise { pending } 이 들어오는 문제가 생긴다.

.map은 내부적으로 단순하게 아래 코드와 같다고 생각하면 된다.

const result = [];
for ( let i = 0 ; i > arr.length ; i++) {
  callback();
}

return result;

내부에 await이 없기 때문에,

promise를 return하지 resolve하지는 못한다.

그래서 찍어보면 Promise자체가 리턴된다.

 

결국 아래와 같이 수정하여 각각의 Promise에 대해 awiat해주어야 한다.

const arr = [1, 2, 3, 4];
function sampleFunction(item) {
  return item + 1;
}

const resultArr = [];
async function test() {
  for (const item of arr) {
    let result = await sampleFunction(item);
    resultArr.push(result);
  };
  console.log(resultArr);
}
test(); // [2, 3, 4, 5]

굳이 map을 사용해야겠다면,

const arr = [1, 2, 3, 4];
function sampleFunction(item) {
  return item + 1;
}

const result = arr.map(async (item) => {
  let result2 = await sampleFunction(item);
  return result2;
});

result.map((item) => {
  item.then((item) => {
    console.log(item); // 2, 3, 4, 5를 차례로 리턴한다.
  }).catch(() => { });
});

이렇게 각각의 결과들에 대해 then을 사용해주어야 한다.