JS에서 배열 평탄화 마스터

Source: Dev.to

중첩 배열

중첩 배열은 다른 배열을 요소로 포함하는 배열입니다. 문자열이나 객체와 같은 값을 보관하는 대신, 중첩 배열은 하나 이상의 배열을 내부에 저장합니다.

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

배열을 평탄화하는 것이 유용한 이유

중첩 배열에 여러 단계의 데이터가 포함되어 있을 때, 값을 읽고 관리하며 효과적으로 처리하기가 어려워질 수 있습니다. 배열을 평탄화한다는 것은 중첩(다중 레벨) 배열을 단일 레벨 배열로 변환하는 것을 의미하며, 이렇게 하면 데이터를 이해하기 쉽고, 반복하기 쉬우며, 다루기 편리해집니다.

const nestedArr = [1, 2, [3, 4], [5, 6]];
// Output: [1, 2, 3, 4, 5, 6]

배열을 평탄화하는 다양한 접근법

1. 재귀 헬퍼 함수를 사용한 while 루프

이 방법은 각 항목을 순회하면서 내부 배열이 있으면 재귀적으로 들어가 모든 값을 평탄한 배열에 모읍니다.

const flatten = (nested) => {
  const flat = [];
  const handleFlat = (array) => {
    let counter = 0;
    while (counter  acc.concat(val), []);
// flatOneLevel => [1, 2, 3, 4]

3. Array.flat() 사용

Array.flat()은 평탄화를 직접 처리하도록 도입된 내장 메서드입니다. 기본적으로 한 단계만 평탄화하지만, 깊이를 지정하거나 Infinity를 사용해 완전히 평탄화할 수 있습니다.

// 한 단계 (기본값)
const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

// 두 단계
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

// 무제한 깊이
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 빈 요소(희소 배열) 평탄화
const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

참고 자료

• 블로그 참고: How to flatten an array in JavaScript