[JS] 자바스크립트 배열 평탄화하기 (flat, flatMap)

 

 

 

 

 

🌈 자바스크립트 중첩 배열 평탄화 하는 방법 정리

중첩된 배열을 평탄화하기 위해 배열의 내장 메서드인 arr.flat() 을 통해 쉽게 처리할 수 있다.

 

 

 

 

1️⃣ flat( )

◾ 기본 구문

const arr = oldArr.flat([depth])
// depth : 중첩된 배열을 평탄화할 때 사용하는 깊이 값이며 기본값은 1이다.

 

◾ 사용방법

/* 기본 depth인 1만큼 평탄화한다. */
const arr = [1, 2, [3, 4]];
arr.flat(); // [1, 2, 3, 4]

/* 입력한 숫자만큼의 depth를 평탄화한다. */
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

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

 

 

 

 

2️⃣ flatMap( )

flatMap( ) 메서드는 각 엘리먼트에 대해 map을 수행한 후 결과값을 새로운 배열로 평탄화한다.

 

◾ 기본 구문

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

 

◾ 사용방법

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

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

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

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

 

const arr = ["it's Sunny in", "", "California"];

arr.map(x=>x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr.flatMap(x => x.split(" "));
// ["it's","Sunny","in","California"]

 

 

 

 

 

 

 

 

📌 참고사이트

MDN :: Array.prototype.flat()

MDN :: Array.prototype.flatMap()