flatMap() 메서드란?
JavaScript의 Array.prototype.flatMap() 메서드는 주어진 중첩 배열(nested array)을 새로운 평탄화된(flat) 배열로 변환하는 함수입니다.
flatMap()은 각 요소에 콜백 함수를 적용하는 map()과, 결과를 한 단계만 펼쳐주는 flat()의 기능을 하나로 결합한 메서드입니다. 즉, arr.map(fn).flat(1)과 동일한 결과를 반환하지만 두 메서드를 따로 호출할 필요가 없어 코드가 더 간결하고 효율적입니다.
flatMap()의 특징
- 원본 배열은 변경하지 않고 새로운 배열을 반환합니다.
- 기본적으로 깊이 1까지만 평탄화합니다.
- 콜백 함수를 인자로 받아 요소를 변환하면서 동시에 평탄화할 수 있습니다.
예제 코드
다음은 Array.prototype.flatMap() 메서드를 활용한 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Array flatMap()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the nested array to flat array</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ["cow", ["bull", "lion", "tiger"], "sheep"];
for (x of arr.entries()) {
fillEle.innerHTML += x + "<br>";
}
var entries = arr.entries();
document.querySelector(".Btn").addEventListener("click", () => {
arr = arr.flatMap((x) => x);
fillEle.innerHTML = "";
for (x of arr.entries()) {
fillEle.innerHTML += x + "<br>";
}
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다. 문자열 요소와 함께 중첩된 하위 배열이 그대로 표시되는 것을 확인할 수 있습니다.
“CLICK HERE” 버튼을 클릭하면 flatMap()이 실행되어 중첩 배열이 평탄화되고, 모든 요소가 하나의 배열 안에 나열된 것을 볼 수 있습니다.
참고 사항
flatMap()은 한 단계(깊이 1)만 평탄화합니다. 만약 2단계 이상 깊게 중첩된 배열을 처리해야 한다면, flat(depth) 메서드에 원하는 깊이 값을 직접 지정해야 합니다. 또한 콜백 함수에서 배열을 반환하면 해당 배열의 요소들이 결과 배열에 개별적으로 삽입되므로, 데이터 변환과 평탄화를 동시에 처리할 때 매우 유용합니다.