JavaScript의 array.flatMap() 메서드는 주어진 중첩 배열을 처리하여 하나의 새로운 평탄화(flat)된 배열을 반환하는 함수입니다. 이름에서 알 수 있듯이 map()과 flat() 기능을 하나로 결합한 메서드로, 각 요소를 변환(map)한 뒤 결과를 깊이 1 수준까지 자동으로 평탄화해 줍니다.
flatMap() 메서드의 동작 방식
flatMap()은 다음 두 단계를 순서대로 수행하는 것과 동일하게 작동합니다.
- map(): 배열의 각 요소에 콜백 함수를 적용하여 새로운 값을 생성합니다.
- flat(1): 변환된 결과에서 깊이 1만큼의 중첩 구조를 제거하여 하나의 배열로 만듭니다.
기본 문법은 다음과 같습니다.
arr.flatMap(callback(currentValue[, index[, array]]))
이제 array.flatMap() 메서드의 실제 사용 예제 코드를 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<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>
위 버튼을 클릭하면 중첩 배열이 평탄화된 배열로 변환됩니다.
</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>실행 결과
위 코드를 실행하면 다음과 같은 출력 화면을 볼 수 있습니다. 초기 상태에서는 ["cow", ["bull", "lion", "tiger"], "sheep"]처럼 문자열과 내부 배열이 함께 포함된 중첩 구조로 표시됩니다.
그런 다음 "CLICK HERE" 버튼을 클릭하면 flatMap() 메서드가 실행되어 내부 배열이 풀려나고, 모든 요소가 같은 깊이에 위치한 하나의 평탄화된 배열로 변환됩니다.
정리
flatMap() 메서드는 map()으로 데이터를 변환하면서 동시에 중첩된 배열 구조를 정리해야 할 때 매우 유용합니다. 특히 API 응답 데이터 가공이나 다차원 배열 처리 시 코드를 더 간결하고 가독성 있게 작성할 수 있도록 도와줍니다. 단, 평탄화는 깊이 1까지만 적용되므로 더 깊은 중첩 구조가 필요하다면 flat() 메서드에 원하는 깊이 값을 지정하여 함께 활용하는 것이 좋습니다.