[JS] flat & flatMap

---

알고있으면 좋은 Javascript Tip✨

---

flat()

• ES2019에 추가된 메서드로 배열 내부의 하위 배열을 쉽게 합칠 수 있는 아주아주 유용한 메서드이다.
• flat 메서드는 하위 배열을 합칠때 사용한다.

const $array = ["a", ["b"], ["c"]];

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

 

flatMap()

• flatMap 메서드는 flat과 map을 합친 메서드이다.
• 하위배열을 결합하는데 조건에 따라 결합을 할때 사용한다.

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

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

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

• flat이란 평면화를 한다는 뜻으로 중첩된 이중 구조를 가진 데이터를 단일 수준으로 단순화 하여 펼친다는 뜻이다. 즉, 중첩된 배열이나 객체가 있을 때, 중첩된 구조를 제거하고 모든 요소를 하나의 배열 또는 객체에 넣는 작업이다.
• flatMap()은 콜백 함수를 실행한 결과값이 복잡한 데이터 구조를 가지고 있으면, 이를 단순화하고 처리하기 쉬운 형태로 변경시켜 최종 결과값을 리턴한다.

 

(1) map()과 flatMap()의 차이점은?

• map()과 flatMap()은 복잡한 데이터 구조를 리턴하냐 리턴하지 않느냐의 차이이다.
• map()은 콜백함수의 결과값이 정직하게 리턴되고, flatMap()은 단일 구조의 배열이나 객체를 리턴한다.