자바스크립트의 Array.prototype.map() 메서드는 배열의 모든 요소에 대해 지정된 콜백 함수를 호출하고, 그 반환값들로 새로운 배열을 생성하는 데 사용됩니다. 원본 배열은 변경되지 않으므로, 데이터를 안전하게 변환할 때 널리 활용되는 핵심 배열 메서드입니다.
문법
arr.map(function callback(currentValue[, index[, array]]))
- currentValue: 현재 처리 중인 배열 요소 (필수)
- index: 현재 처리 중인 요소의 인덱스 (선택)
- array: map()을 호출한 원본 배열 (선택)
map()은 콜백 함수가 반환하는 값을 순서대로 모아 새로운 배열로 반환합니다. 단, 원본 배열 자체는 그대로 유지됩니다.
예제 1: 절댓값으로 변환하기
배열의 음수를 포함한 모든 요소에 Math.abs()를 적용해 절댓값 배열을 만드는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모</h2>
<p>버튼을 클릭하면 abs() 결과가 표시됩니다.</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
function display() {
var arr = [1, -2, 3, 4, 5, -6, 7, 8, 9, 10];
var res = arr.map(Math.abs);
document.write(res);
}
</script>
</body>
</html>
실행 결과
위에서 “결과 보기” 버튼을 클릭하면 다음과 같이 음수가 양수로 변환된 배열이 출력됩니다.
예제 2: 숫자 반올림하기
소수를 포함한 배열에 Math.round()를 적용해 모든 요소를 정수로 반올림하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모</h2>
<p>버튼을 클릭하면 숫자가 반올림됩니다.</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
var arr = [11.4, 12.9, 25.6, 88.9];
document.getElementById("test").innerHTML = arr
function display() {
var res = arr.map(Math.round);
document.getElementById("test").innerHTML = res
}
</script>
</body>
</html>
실행 결과
“결과 보기” 버튼을 클릭하면 각 숫자가 반올림되어 표시됩니다.
map() 사용 시 알아두면 좋은 점
- 원본 배열 보존: map()은 기존 배열을 수정하지 않고 항상 새 배열을 반환합니다.
- 화살표 함수 활용:
arr.map(x => x * 2)처럼 ES6 화살표 함수와 함께 사용하면 코드가 더 간결해집니다. - 메서드 전달 시 주의점:
Math.abs,Math.round처럼 콜백으로 내장 메서드를 직접 전달할 수 있지만, 객체 메서드를 전달할 때는this바인딩 문제에 유의해야 합니다. - 희소 배열 처리: 배열의 빈(empty) 요소는 콜백이 실행되지 않고 결과 배열에 그대로 유지됩니다.