[JavaScript] flat()과 flatMap() 함수 알아보기

깊고 복잡한 배열 구조를 간단하게 정리하기 위해 사용하는 함수입니다.

map()함수는 다들 많이 이해하고 사용하고 계시지만 ES2019에 추가된 flat()과 flatMap()에 대해 알아보도록 합시다!

 

flat()

중첩된 배열을 정해진 깊이만큼 평탄하게 만들어 주는 함수입니다.

const newArr = arr.flat([depth])

매개변수로 어느 깊이까지 평탄하게 할 지 정할 수 있는 depth 변수가 있고 이는 선택사항입니다.

생략 시, 기본값은 1이 적용되며 

만일, infinity를 사용하게 된다면 하위 배열이 없을때까지 평탄화해줍니다.

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

빈 요소가 있을 경우, 무시됩니다.

 

flatMap()

앞서 설명한 flat()함수에 map()기능을 합친 함수로, 평탄화한 배열의 각 요소에 접근하여 사용자 정의 로직을 수행하는 함수입니다.

다만, flat()과는 달리 깊이를 최대 1만큼만 평탄하게 만들어줍니다.

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

기본구문이 복잡하게 되어있지만 설명드린대로 map()함수와 사용방법은 동일하니 상황에 맞게 map()을 사용할지 flatMap()을 사용할지 알맞게 사용하시길 바랍니다:)

 

❗️ 마지막으로 두 메서드 모두 ES2019에 추가된 메서드이기 때문에 Internet Explorer에서는 호환이 되지 않습니다!