flat()과 flatMap()으로 중첩 배열 정복!

 

JavaScript에서 데이터를 다루다 보면 배열 안에 또 다른 배열이 들어 있는 **'중첩 배열(Nested Array)'**과 마주치게 됩니다. 이 복잡한 구조를 깔끔하게 하나의 배열로 펼쳐주는 마법 같은 메서드가 바로 **flat()**과 **flatMap()**입니다. ES2019에 도입된 이 두 친구의 핵심 기능을 쉽고 빠르게 파헤쳐 봅시다!

1. 중첩 배열을 펼치는 flat() 메서드

**flat()**은 이름 그대로 중첩된 배열을 평평하게(Flatten) 만들어주는 역할을 합니다. 복잡하게 얽힌 배열 구조를 단숨에 정리해 주죠.

• 기본 사용법 (1단계 깊이): 인자 없이 사용하면 기본적으로 1단계 깊이의 중첩만 해제합니다. 대부분의 경우 1단계만으로 충분합니다.
  JavaScript

  // 예시: 1단계 중첩
  const arr = [1, 2, [3, 4, 5], 6];
  const flatArr = arr.flat(); // 결과: [1, 2, 3, 4, 5, 6]
  

• 깊이 지정하기: 배열이 2단계 이상 깊게 중첩된 경우, flat() 메서드에 숫자 인자를 전달하여 해제할 깊이를 지정할 수 있습니다.
  JavaScript

  // 예시: 2단계 깊이
  const arrDeep = [1, [2, [3, 4]], 5];
  const flatArr = arrDeep.flat(2); // 결과: [1, 2, 3, 4, 5]
  

• 모든 깊이 해제: 중첩 깊이를 알 수 없거나, 무조건 모든 중첩을 해제하고 싶다면 인자로 **Infinity**를 사용하면 됩니다.
  JavaScript

  const arrAllDeep = [1, [2, [3, [4, [5]]]]];
  const flatArr = arrAllDeep.flat(Infinity); // 결과: [1, 2, 3, 4, 5]
  

---

2. map과 flat을 하나로! flatMap() 메서드

데이터를 변환(Map)하면서 동시에 평평하게(Flat) 만드는 작업은 굉장히 흔합니다. **flatMap()**은 바로 이 map()과 flat()의 **체이닝(Chaining)**을 단 하나의 메서드로 결합하여 편의성과 성능을 높여줍니다.

• 핵심 기능:
  1. **map()**처럼 콜백 함수를 실행하여 배열의 모든 요소를 변환합니다.
  2. 변환된 결과를 자동으로 1단계 깊이로 평평하게 만듭니다.
  JavaScript

  // 예시: 계좌 객체에서 '거래 내역(movements)' 배열만 뽑아 하나의 배열로 합치기
  const accounts = [
      { movements: [200, 450] },
      { movements: [-50, 300] }
  ];
  
  // map + flat (기존 방식)
  const allMovements = accounts.map(acc => acc.movements).flat(); // [200, 450, -50, 300]
  
  // flatMap (새로운 방식)
  const allMovementsFlatMap = accounts.flatMap(acc => acc.movements); // [200, 450, -50, 300]
  

• 주의할 점: **flatMap()**은 이름에 'Flat'이 들어갔지만, 오직 1단계 깊이로만 평탄화합니다. 만약 변환된 결과 배열이 2단계 이상 깊게 중첩된다면 flatMap() 대신 map()과 flat(깊이)을 조합해야 합니다.

---

3. 언제 무엇을 써야 할까?

메서드	주요 역할	평탄화 깊이	사용 상황
flat()	순수하게 중첩 배열을 해제	인자로 지정 가능 (1이 기본, Infinity 가능)	중첩된 구조를 풀기만 할 때 (데이터 변환 불필요)
flatMap()	변환(Map) 후 1단계 해제(Flat)	항상 1단계	데이터를 변환하고 그 결과를 하나의 배열로 합칠 때 (map().flat()을 대체)

Sheets로 내보내기

이 두 메서드를 잘 기억해두면, 복잡한 중첩 배열을 다루는 코드를 훨씬 깔끔하고 효율적으로 작성할 수 있을 겁니다!