자바스크립트 Array flatMap() 메서드란?
자바스크립트의 flatMap() 메서드는 배열의 각 요소에 콜백 함수를 적용한 후, 그 결과를 깊이 1(depth 1)만큼 평탄화(flatten)하여 새로운 배열을 반환합니다. 즉, map()으로 요소를 변환하고 flat()으로 펼치는 두 단계 작업을 하나의 메서드로 처리할 수 있어 코드가 훨씬 간결해집니다.
flatMap()은 ES2019(ES10)에서 표준으로 도입되었으며, 원본 배열을 변경하지 않고 항상 새로운 배열을 반환한다는 점도 기억해 두면 좋습니다.
기본 문법
array.flatMap(function callback(currentValue, index, array))
- currentValue : 현재 처리 중인 배열 요소
- index : 현재 처리 중인 요소의 인덱스 (선택 사항)
- array : flatMap()을 호출한 원본 배열 (선택 사항)
예제 1 : 숫자 배열에 flatMap() 적용하기
다음 예제에서는 숫자 배열의 모든 요소에 10을 더한 새 배열을 flatMap()으로 생성한 뒤, entries() 메서드를 사용해 인덱스와 값을 함께 화면에 출력합니다. 또한 버튼을 클릭하면 some() 메서드로 배열 안에 550과 같은 값이 존재하는지 여부를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<p>Is any point equal to 550 from the key-value pairs...</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
var res = pointsArr.flatMap(val => [val + 10]).entries();
for (val of res) {
document.getElementById("test").innerHTML += val + "<br>";
}
function pointsFunc(points) {
return points == 550;
}
function display() {
document.getElementById("test").innerHTML = pointsArr.some(pointsFunc);
}
</script>
</body>
</html>실행 결과
페이지를 열면 각 요소에 10이 더해진 값들이 인덱스와 함께 출력됩니다. 이어서 위 화면의 "Result" 버튼을 클릭해 보세요.
배열에 550과 같은 값이 없으므로 some() 메서드의 결과인 false가 표시됩니다.
예제 2 : 문자열 배열에 flatMap() 적용하기
이번에는 문자열 배열에 flatMap()을 적용한 예제입니다. 문자열에 숫자 10을 더하면 산술 연산이 아닌 문자열 연결이 일어난다는 점에 주목하세요. 버튼을 클릭하면 slice() 메서드로 일부 요소를 추출한 결과도 함께 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Car Variant</h2>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var carid = ["110", "230", "299", "399"];
var res = carid.flatMap(val => [val + 10]).entries();
for (val of res) {
document.getElementById("test").innerHTML += val + "<br>";
}
function display() {
document.getElementById("test").innerHTML = "Array after slicing some elements = "+carid.slice(1,4);
}
</script>
</body>
</html>실행 결과
"110" + 10처럼 문자열과 숫자를 더하면 "11010"이 되듯, 각 요소 끝에 10이 붙은 문자열이 만들어집니다. 이어서 "Result" 버튼을 클릭해 보세요.
버튼을 클릭하면 slice(1, 4)로 인덱스 1부터 3까지의 요소("230", "299", "399")만 추출된 결과가 표시됩니다.
정리
flatMap()은 map과 평탄화를 동시에 처리해 주는 매우 유용한 메서드입니다. 중첩 배열을 다루거나 map()의 결과를 바로 펼쳐야 하는 상황이라면 map().flat() 대신 flatMap()을 사용해 보세요. 코드가 짧아질 뿐만 아니라 가독성도 크게 향상됩니다.