[JavaScript]Array.flat() 함수로 배열 병합

이번 포스팅에서는 배열을 병합하는 Array.flat() 함수를 소개합니다.

 

목차

1. Array.flat()
2. 대체 솔루션

---

Array.flat() 

Array.flat() 함수는 지정한 깊이까지 재귀적으로 이어 붙인 1차원 배열을 생성합니다.

 

다음은 2차원 배열을 flat() 함수로 이어붙인 예제입니다.

const arr = [['A', 'B'] , 'C', ['D']]

const flatArr = arr.flat();

console.log(flatArr);
// ['A', 'B', 'C', 'D']

 

Array.flat() 함수의 매개변수

array.flat() 함수의 매개변수에는 중첩 배열에서 평탄화하고자 하는 깊이의 값을 설정하며, 기본값은 1입니다.

 

즉, 다음 코드는 동일합니다.

array.flat();

array.flat(1);

 

깊은 중첩 배열

다음 코드는 매개변수를 1로 설정하였기 때문에 1레벨까지 평탄화되며, 2레벨은 평탄화되지 않습니다.

const arr = ['A', ['B', 'B', ['C', 'C', 'C']]];

const flatArr = arr.flat(1)

console.log(flatArr);

실행 결과

 

무한히 중첩된 배열

배열의 마지막 깊이까지 평탄화를 해야하는데, 깊이를 모를 경우 매개변수를 Infinity로 설정합니다.

const arr = ['A', ['B', ['C', ['D', ['E']]]]];

const flatArr = arr.flat(Infinity);

console.log(flatArr); 
// ['A', 'B', 'C', 'D', 'E']

 

빈 요소를 제거

flat() 함수는 배열의 빈 요소를 제거하는 특징도 있습니다.

const arr = ['A', ,'B', ,'C']

const flatArr = arr.flat();

console.log(flatArr); 
// ['A', 'B', 'C']

---

대체 솔루션

flat() 함수는 ES2019에 도입된 기능이므로 Internet Explorer에서는 지원되지 않습니다.

 

다음은 대체 가능한 솔루션입니다.

 

ES6 솔루션

다음은 ES6 솔루션입니다. 다음 예제를 통해서 1레벨까지만 평탄화되는 것을 확인할 수 있습니다.

const oneLevelDeep = [ [1, 2], [3, [4]]];

const flatArr = [].concat(...oneLevelDeep); 

console.log(flatArr);
// [1, 2, 3, [4]]

 

재귀

깊은 중첩의 배열을 평탄화하고 싶은 경우 재귀를 사용할 수 있습니다. 다음은 MDN에서 제공하는 솔루션입니다.

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

function flattenDeep(arr) { 
   return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); 
} 

flattenDeep(arr);
// [1, 2, 3, 4, 5]