중첩배열을 평탄화시켜주는 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()을 써준것과 같은 셈이지만, flatMap이 좀 더 효율적이다.

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

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()
const new_arr3 = arr.reduce((acc,cur)=>acc.concat([cur+1]),[])

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

 

 

브라우저 호환성

Internet Explorer에서만 지원을 하지 않는 메서드들이였으나, Internet Explorer가 완전히 서비스를 종료했으니, 이제 flat과 flatMap은 어느 브라우저든 사용할 수 있는 메서드이다.

 

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

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