JavaScript에서 다차원 배열 평탄화란?
다차원 배열이란 배열 안에 또 다른 배열이 중첩되어 있는 구조를 말합니다. 예를 들어 [1, 2, 3, [4, 5], [6, [7, 8]]]처럼 요소 자리에 배열이 포함된 형태입니다. 이러한 중첩 구조를 하나의 일차원 배열로 펼치는 작업을 '평탄화(flattening)'라고 부르며, 데이터를 정렬하거나 순회할 때 매우 유용하게 활용됩니다.
JavaScript에서는 ES2019(ES10)부터 도입된 flat() 메서드를 사용하면 별도의 재귀 함수 없이 간단하게 배열을 평탄화할 수 있습니다.
flat() 메서드의 기본 문법
arr.flat(depth)
depth 인자는 몇 단계까지의 중첩 배열을 펼칠지 지정하는 값입니다. 기본값은 1이며, 모든 깊이의 중첩을 완전히 제거하고 싶다면 Infinity를 전달하면 됩니다.
예제 코드
아래 예제는 깊이 2까지 중첩된 배열을 flat(2)로 평탄화한 후, 결과를 화면에 출력하는 완전한 HTML 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 배열 평탄화</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript에서 다차원 배열 평탄화하기</h1>
<div class="sample"><pre>[1,2,3,[4,5],[6,[7,8]]]</pre></div>
<div style="color: green;" class="result">flat 적용 결과 : <br /></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 해당 배열이 깊이 2만큼 평탄화됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = [1, 2, 3, [4, 5], [6, [7, 8]]];
document.querySelector(".Btn").addEventListener("click", () => {
let store = arr.flat(2);
store.forEach((item, index) => {
resEle.innerHTML += index + " : " + item + "<br>";
});
});
</script>
</body>
</html>실행 결과
'클릭하세요' 버튼을 누르기 전 화면입니다. 원본 배열 [1,2,3,[4,5],[6,[7,8]]]이 그대로 표시됩니다.
버튼을 클릭하면 flat(2)가 실행되어 중첩 배열이 모두 펼쳐진 결과가 출력됩니다.
결과 분석
원본 배열은 세 단계의 깊이를 가집니다. 최상위 레벨의 [4, 5]와 [6, [7, 8]], 그리고 그 안에 한 번 더 중첩된 [7, 8]입니다. flat(2)를 호출하면 두 단계까지의 중첩이 해제되어 다음과 같은 일차원 배열이 만들어집니다.
[1, 2, 3, 4, 5, 6, 7, 8]
참고: 관련 메서드들
- flatMap():
map()수행 후 바로 깊이 1로 평탄화까지 처리해 주는 메서드로, 변환과 평탄화를 한 번에 할 때 유용합니다. - flat(Infinity): 중첩 깊이를 알 수 없는 경우 무한대 깊이로 지정하여 완전히 평탄화할 수 있습니다.
이처럼 flat() 메서드를 활용하면 복잡한 재귀 로직 없이도 다차원 배열을 손쉽게 다룰 수 있으므로, 실무에서 배열 데이터를 처리할 때 적극적으로 활용해 보시기 바랍니다.