📖 TIL - "드디어 이해했다!" Promise.all과 비동기 함수의 비밀 🔍

📌 문제 설명

문제 설명

여러 비동기 함수에서 반환되는 데이터를 병합하고 id 기준으로 정렬하는 문제

입력

• 비동기 함수 배열 (각 함수는 배열 형태의 데이터 반환)

출력

• id 기준으로 병합되고 정렬된 배열

예시

// 함수 A 반환값: [{ id:1, name:'Alice'}, { id:2, age:20 }]
// 함수 B 반환값: [{ id:1, age:25 }, { id:3, gender:'F'}]

// 결과: 
[
  { id:1, name:'Alice', age:25 },
  { id:2, age:20 },
  { id:3, gender:'F'}
]

🤔 문제 접근

1. 비동기 함수 배열의 실행 시점 이해

   • 비동기 함수는 실행(호출)되어야 Promise 반환
   • map으로 각 함수를 실행해야 함

2. Promise.all과 배열 처리

   • Promise.all로 모든 비동기 작업 완료 대기
   • flat()으로 중첩 배열 평탄화 필요

3. 데이터 병합 전략

   • reduce로 id 기준 데이터 병합
   • 스프레드 연산자로 객체 속성 업데이트

💡 해결 방법

async function asyncDataMerger(...asyncFunctions) {
  const combineArr = (
    await Promise.all(asyncFunctions.map((func) => func()))
  ).flat();
  
  return combineArr
    .reduce((a, c) => {
      const curIdx = a.findIndex((e) => c.id === e.id);
      if (curIdx !== -1) {
        a[curIdx] = { ...a[curIdx], ...c };
      } else {
        a.push(c);
      }
      return a;
    }, [])
    .sort((a, b) => a.id - b.id);
}

🔍 코드 설명

1. map을 사용한 함수 실행

const asyncFunctions = [
  async () => [...], // 아직 실행되지 않은 함수
  async () => [...], // 아직 실행되지 않은 함수
];

asyncFunctions.map(fn => fn()) // 각 함수를 실행하여 Promise 반환

• 배열 안의 함수들은 실행되지 않은 상태
• map으로 각 함수를 호출해야 Promise 객체 반환
• 단순히 spread 연산자([...asyncFunctions])로는 함수 실행 불가

2. Promise.all과 flat 동작

// Promise.all의 결과 (배열의 배열)
[
  [{ id: 1, name: 'Alice' }, { id: 2, age: 20 }],
  [{ id: 1, age: 25 }, { id: 3, gender: 'F' }]
]

// flat() 적용 후 (1차원 배열)
[
  { id: 1, name: 'Alice' }, 
  { id: 2, age: 20 },
  { id: 1, age: 25 }, 
  { id: 3, gender: 'F' }
]

• Promise.all은 각 Promise의 결과를 배열로 반환
• 결과가 중첩 배열 형태이므로 flat()으로 평탄화 필요
• flat()은 다차원 배열을 1차원 배열로 변환

3. 데이터 병합 과정

.reduce((a, c) => {
  const curIdx = a.findIndex((e) => c.id === e.id);
  if (curIdx !== -1) {
    a[curIdx] = { ...a[curIdx], ...c };  // 객체 병합
  } else {
    a.push(c);  // 새로운 id는 추가
  }
  return a;
}, [])

✨ 새롭게 배운 점

1. async/await와 Promise의 관계

   • async는 비동기 작업을 할 함수를 정의
   • await는 비동기 부분의 완료를 대기

2. map과 Promise.all의 협력

   • map: 실행되지 않은 함수들을 실행시켜 Promise 생성
   • Promise.all: 생성된 Promise들의 완료를 대기

3. flat의 유용성

   • 중첩 배열 구조를 단순화
   • Promise.all 결과 처리에 효과적

🚀 이런 점이 효율적이에요

• map으로 함수 실행과 Promise 생성을 한 번에 처리
• flat으로 간단하게 배열 구조 단순화
• reduce로 객체 병합을 효율적으로 수행

⭐️ 참고 자료

• Promise.all MDN 문서
• Array methods (flat, map, reduce)
• async/await 개념