JavaScript에서 배열의 각 요소를 일괄적으로 변환해야 할 때 가장 널리 사용되는 메서드가 바로 map()입니다. map() 메서드는 원본 배열을 변경하지 않으면서, 콜백 함수가 반환한 값들로 구성된 새로운 배열을 생성합니다.
map() 메서드의 기본 문법
arr.map((element, index, array) => { /* 변환 로직 */ });콜백 함수는 배열의 모든 요소에 대해 순서대로 실행되며, 각 호출의 반환값이 새 배열의 해당 위치에 저장됩니다. 인덱스(index)와 원본 배열(array)은 필요할 때만 선택적으로 사용하면 됩니다.
예제: 배열의 각 요소 제곱하기
다음은 버튼을 클릭하면 map() 메서드를 사용해 배열의 각 요소를 제곱한 뒤 화면에 출력하는 완전한 예제 코드입니다.
<!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;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>map()으로 JavaScript 배열 변환하기</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 배열의 각 요소가 제곱되어 표시됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let arr = [22, 33, 44, 55];
BtnEle.addEventListener("click", () => {
resEle.innerHTML = arr.map((a) => a * a);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 map() 메서드에 의해 각 요소가 제곱된 결과인 [484, 1089, 1936, 3025]가 화면에 표시됩니다.
정리
이처럼 map() 메서드를 활용하면 반복문 없이도 간결하고 가독성 높은 코드로 배열을 변환할 수 있습니다. 특히 원본 배열을 보존하면서 새 배열을 얻어야 하는 상황에서 매우 유용하며, React 등 최신 프론트엔드 개발에서도 리스트 렌더링에 필수적으로 사용되는 패턴입니다.