본문 바로가기
Language/JavaScript (Modern)

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

by 썸머워즈 2022. 2. 19.
반응형

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

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

developer.mozilla.org

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

 

Array.prototype.flatMap() - JavaScript | MDN

flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다. 이는 깊이 1의 flat 이 뒤따르는 map 과 동일하지만, flatMap 은 아주 유용하며 둘을

developer.mozilla.org

반응형

태그



댓글 0

TOP