flat 과 flatMap

flat과 flatMap은 이름에서 알 수 있듯이, 평탄화된 새로운 배열을 만들어준다. 때때로, 이러한 메서드가 유용하게 쓰일 때가 있다.

Flat

const newArr = arr.flat([depth])

아래 arr에는 배열안에 배열이있는 중첩배열형태이지만, flat을 사용하면, 중첩된 배열이 사라진 온전한 배열을 가질 수 있게 된다.

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

const new_arr = arr.flat()

console.log(new_arr)	//[1,2,3,4,5,6,7]
 

하지만, 이전 배열보다 깊이가 더 깊다면, 온전한 배열로 만들 수 없게 된다.

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

const new_arr = arr.flat()

console.log(new_arr) //[1,2,3,4,[5,6],7]

이럴 때에는 depth 옵션을 주면 된다.

depth를 입력하지않으면 기본값은 1이며, 이보다 더 큰 2를 입력하면 제대로 출력할 수 있게된다.

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

const new_arr = arr.flat(2)

console.log(new_arr) //[1,2,3,4,5,6,7]

만약 depth가 몇일지 정확하게 알 수 없거나, 지정하기 어렵다면 Infinity를 입력해주면 된다.

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

const new_arr = arr.flat(Infinity)

console.log(new_arr)	//[1,2,3,4,5,6,7]

flatMap

flatMap은 일반 map처럼 배열을 순회한 후, 결과를 새로운 배열로 평탄화시켜준다. map으로 만든 새로운 배열에 flat()을 써준것과 같다.

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

const new_arr = arr.flatMap(x=>[x+1])
const new_arr2 = arr.map(x=>[x+1]).flat()

console.log(new_arr)	//[1,2,3,4,5,6,7]
console.log(new_arr2)	//[1,2,3,4,5,6,7]