배열 평면화(Flattening)란?
배열 평면화란 하나의 배열 안에 중첩되어 있는 여러 하위 배열들을 하나의 단일 배열로 병합하는 과정을 말합니다. 예를 들어 [1, 2, [3, 4, [5, 6]], 9]처럼 여러 겹으로 중첩된 구조를 [1, 2, 3, 4, 5, 6, 9]와 같이 평평한 형태로 바꾸는 것이죠.
JavaScript에서 배열을 평면화하는 방법은 크게 두 가지로 나눌 수 있습니다.
1) concat.apply()
concat() 메서드와 apply()를 조합하면 중첩 배열을 간단하게 병합할 수 있습니다. 다음 예제에는 3, 4, 5, 6이 중첩 배열 안에 포함되어 있으며, concat() 메서드로 평면화한 결과 1, 2, 3, 4, 5, 6, 9가 출력됩니다.
예제
<html> <body> <script> var arrays = [1,2,[3,4,[5,6]],9]; var merged = [].concat.apply([], arrays); document.write(merged); </script> </body> </html>
출력 결과
1,2,3,4,5,6,9
동작 원리: 빈 배열([])에서 apply()를 호출하면 원본 배열의 각 요소가 개별 인수로 전달되고, concat()이 이 요소들을 하나의 배열로 합쳐 줍니다.
2) array.flat()
ES2019에서 도입된 flat() 메서드는 훨씬 직관적인 방식으로 배열을 평면화할 수 있습니다. 인수로 지정한 깊이(depth)만큼 중첩 배열을 펼치며, 아래 예제에서는 2단계 깊이까지 평면화하여 1, 2, 2, 3, 4, 5, 6, 9가 출력됩니다.
예제
<html> <body> <script> const arrays = [1,2,[2,3,[4,5,[6,9]]]]; const merged = arrays.flat(2); document.write(merged); </script> </body> </html>
출력 결과
1,2,2,3,4,5,6,9
참고: flat()에 인수를 전달하지 않으면 기본값인 1단계까지만 펼쳐집니다. 몇 겹으로 중첩되었든 모든 배열을 완전히 평면화하려면 arrays.flat(Infinity)를 사용하는 것이 좋습니다.