[Javascript] .flat() .flatMap() 알아보기

---

목차

1. flat() 이란?

2. flat() 예제

3. flatMap() 이란?

---

 

 

 

1. flat()이란?

---

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

간단히 말해 배열 내부의 하위 배열을 쉽게 합칠 수 있는 메서드이다.

 

 

 

2. flat() 예제

---

const exampleArray = ["a", ["b"], ["c"]];

위와 같은 배열을 ['a', 'b', 'c'] 와 같이 만들고 싶을 때 기존에는 concat과 reduce를 사용해서 배열을 합했다.

 

 

이 때 flat을 사용하면 간단히 배열을 합칠 수 있다.

const exampleArray = ["a", ["b"], ["c"]];
const newArray = exampleArray.flat();
//newArray = ['a','b','c'];

 

 

flat()은 depth에 따라 합치는 정도를 나눌 수 있으며

const exampleArray = ["a", ["b", ["c"]]];
const newArray = exampleArray.flat();
//newArray = ['a','b',['c']];

const flat1 = exampleArray.flat(1);
//newArray = ['a','b',['c']];

const flat2 = exampleArray.flat(2);
//newArray = ['a','b','c'];

 

 

빈 요소가 있으면 무시된다.

const exampleArray = ["a", , ["b"], ["c"]];
const newArray = exampleArray.flat();
//newArray = ['a','b','c'];

 

 

 

3. flatMap() 이란?

---

flatMap 메소드는 flat과 map을 합친 메서드이다. 따라서 map 대신 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]