JavaScript에서는 중첩된 배열 안에 false, null 같은 값이 섞여 있어도 이를 그대로 유지하면서, 모든 요소를 하나의 평탄한(flat) 배열로 만들어야 하는 경우가 자주 있습니다. 이번 글에서는 재귀 호출과 반복문을 활용해 다차원 배열을 1차원 배열로 병합하는 함수를 직접 구현해 보겠습니다.
문제 정의
요구 사항은 다음과 같습니다. 중첩 배열(내부에 배열을 포함하는 배열)을 입력받아, 내부의 모든 요소를 순서대로 꺼내어 중첩 없이 하나의 배열로 반환하는 JavaScript 함수를 작성하는 것입니다.
예를 들어 아래와 같은 입력이 있다고 가정해 보겠습니다.
const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];
이때 기대하는 출력 결과는 다음과 같습니다.
const output = [1, 2, 3, 4, 5, false, 6, 5, 8, null, 6];
구현 원리: 재귀 + 반복문
핵심 아이디어는 간단합니다.
- 배열의 각 요소를 순회하면서 해당 요소가 배열인지 검사합니다.
- 배열이라면 그 배열에 대해 자기 자신(재귀 호출)을 실행해 평탄화한 결과를 펼쳐 넣습니다.
- 배열이 아니라면 값을 그대로 결과 배열에 추가합니다.
이 로직을 Array.prototype에 확장하여 어떤 배열에서든 flatten() 메서드로 사용할 수 있도록 구현해 보겠습니다.
예제 코드
const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];
const flatten = function () {
let res = [];
for (let i = 0; i < this.length; i++) {
if (Array.isArray(this[i])) {
// 요소가 배열이면 재귀적으로 평탄화 후 펼쳐서 추가
res.push(...this[i].flatten());
} else {
// 일반 값은 그대로 추가
res.push(this[i]);
}
}
return res;
};
Array.prototype.flatten = flatten;
console.log(arr.flatten());실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[
1, 2, 3, 4,
5, 5, false, 6,
5, 8, null, 6
]보시다시피 몇 겺으로 중첩되어 있던 배열이 false와 null 값을 포함한 채 한 줄짜리 배열로 깔끔하게 병합되었습니다.
참고: ES2019의 flat() 메서드
현대 JavaScript 환경에서는 위와 같은 로직을 직접 작성하지 않고도 내장 메서드로 해결할 수 있습니다. ES2019부터 도입된 Array.prototype.flat()은 지정한 깊이만큼 배열을 평탄화하며, Infinity를 전달하면 모든 중첩을 제거합니다.
const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]]; console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, false, 6, 5, 8, null, 6]
다만 인터뷰나 학습 목적이라면 재귀와 반복문으로 직접 구현해 보는 것이 동작 원리를 이해하는 데 큰 도움이 됩니다. 실무에서는 브라우저 호환성 범위에 따라 내장 flat()을 우선 고려하는 것이 좋습니다.