[ES6+] arr.flat() - 배열의 평탄화, 중첩 배열 하나로 만들기 (ft. flatMap())

ES2019(ES10)에서 새롭게 추가된 Array.prototype.flat() 메서드에 대해 알아보자.

이 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열로 만들어주는 역할을 한다.

 

▷ 구문

const newArr = arr.flat([depth])

depth : 중첩 배열 구조를 평탄화할 때 사용할 깊이 값이며, 생략 시 기본값으로 1이 주어진다.

---

▷ 예제 1) Array.prototype.flat() 기본 사용법

const arr1 = [1, 2, ,[3, 4]];
arr1.flat(); // [1, 2, 3, 4]

 

depth를 생략할 경우 기본적으로 1이 주어지며, 1depth의 배열까지 모두 평탄화 작업을 실시하여 배열로 반환한다.

이 때 배열에 비어있는 인덱스는 생략되어 반환된다.

 

▷ 예제 2) depth별 케이스

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

arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]

const arr2 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr2.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

▷ 예제 3) Array.prototype.flatMap() 사용법

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 레벨만 평탄화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

flatMap() 메서드는 배열 메서드인 map() 메서드와 flat() 메서드를 합친것이라고 보면 된다.

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

Array.prototype.flat() - JavaScript | MDN

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

Array.prototype.flatMap() - JavaScript | MDN