[JS] 중첩된 배열을 평탄화하는 방법

Sckroll·2024년 11월 10일

`Array.prototype.flat()`

ES2019부터 지원하는 Array.prototype.flat() 메소드(이하 Array.flat())를 사용하면 여러 번 중첩된 배열을 n차원의 배열로 평탄화할 수 있다.

const arr = [0, 1, 2, [3, 4]];
console.log(arr.flat()); // [0, 1, 2, 3, 4]

사용법

인자로 얼마나 깊이 평탄화할 것인지 지정하는 깊이(depth)를 전달할 수 있으며, 기본값은 1이다. Infinity로 전달하면 무조건 1차원 배열로 평탄화된다.

const arr = [0, 1, [2, [3, [4, 5]]]];
console.log(arr.flat()); // [0, 1, 2, [3,[4, 5]]]
console.log(arr.flat(2)); // [0, 1, 2, 3, [4, 5]]
console.log(arr.flat(Infinity)); // [0, 1, 2, 3, 4, 5]

특징

배열 복사본 반환

Array.flat()은 배열의 원본을 변경하지 않는 복사본을 리턴한다.

const arr = [1, 2, , 4, 5];
console.log(arr.flat()); // [1, 2, 4, 5]

빈 슬롯 제거

배열에 빈 슬롯(희소 배열)이 있다면, 해당 슬롯을 제거한다.

const arr = [1, , 3, ['a', , 'c']];
console.log(arr.flat()); // [1, 3, "a", "c"]

const arr2 = [1, , 3, ['a', , ['d', , 'e']]];
console.log(arr2.flat()); // [1, 3, "a", ["d", empty, "e"]]
console.log(arr2.flat(2)); // [1, 3, "a", "d", "e"]

유사 배열 객체의 경우

유사 배열 객체에서는 사용할 수 없다.

유사 배열 객체(Array-like Objects)란, 키가 숫자이고, length 프로퍼티를 가진 객체를 의미한다.
ex: function의 arguments 객체

사실 flat() 뿐만 아니라 모든 배열의 메소드를 사용할 수 없긴 하다. 하지만 call()이나 apply()를 통해 호출하거나, Array.from() 메소드에 유사 배열 객체를 인자로 전달하여 배열로 변환하면 사용할 수 있다.

`Array.prototype.flatMap()`

Array.map()과 결합한 Array.flatMap()도 있다. 다만, depth가 1로 한정되어있다. map()과 flat()을 각각 호출하는 것보다는 (MDN의 설명을 빌리자면) 약간 더 효율적이다.

const arr = [1, 2, 1];
const result = arr.flatMap(num => (num === 2 ? [2, 2] : 1));
console.log(result); // [1, 2, 2, 1]

ES2019 이전의 배열 평탄화

`concat()`을 사용한 1단계 중첩

const oneLevelDeep = [ [1, 2], [3, [4]]];
const flatArr = [].concat(...oneLevelDeep); 
console.log(flatArr); // [1, 2, 3, [4]]

재귀를 사용한 n단계 중첩

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

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