javascript sort() 에 async 함수 쓰기

원래 데이터에는 없고, 서버에서 비동기 요청으로 받아온 데이터를 이용해서 원래 데이터를 정렬하고 싶어 아래처럼 적었다.

그런데 오류가 났다.

const sortArray = (array, name) => {
  return array.sort(
    async (a, b) => {
    	const x = await a.searchDetailById(a.id);
        const y = await b.searchDetailById(b.id);
      	return x - y;
      }
  );
};

 

이런 식으로 sort 커스텀 함수를 async 로 사용하고 싶을 때..

sort 커스텀 함수는 async 를 쓸 수 없다. 당연하다... 저러면 promise 를 반환하니 말이다.

 

sort 에 async 를 쓰고 싶다면 아래처럼 promise.all 로 먼저 받아온 후, 원래 데이터에 있던 속성인 것처럼 가공한 후 정렬해주면 된다.

(이는 스택오버플로우를 참고하였다..)

 

로직을 상세히 설명하자면,

일단 async-await 으로 가져올 비교 항목 (위의 코드에서는 a.searchDetailById(id).good) 을 원래 데이터 array 와 합친다. 

그러면 [0] 번째 요소는 async-await 으로 가져온 항목일 것이고, [1]번째 요소는 원래 array 이다.

합친 새로운 object 를 sort 한 후, [1] 번째 요소만 다시 따로 빼네면 sorted array 를 만들 수 있다.

const sortArray = async (array) => {
  const originArray = array;
  
  //먼저 비교 항목을 비동기로 받아와 원래 array 에 있던 속성인 것처럼 합친다.
  const comparableArray = await Promise.all(
    originArray.map(async (x) => [
      await searchDetailById({ id: x.id }),
      x,
    ])
  );
  
  //[0] 번째 요소가 비교 속성이므로 이를 응용하여 비교한다.
  comparableArray.sort((a, b) => {
    return +b[0].good - +a[0].good;
  });
  
  //정렬된 coparableArray 의 [1] 번째 요소는 원래 데이터이니 [1] 번째 요소만 빼낸다
  const sortedArray = comparableArray.map((x) => {
    return x[1];
  });

  return sortedArray;
};