JavaScript에서 객체(Object)와 배열(Array)을 다룰 때 자주 사용되는 두 가지 메서드 조합, Object.keys().map()과 Array.map()의 차이를 예제 코드를 통해 살펴보겠습니다.
두 메서드의 기본 개념
Object.keys().map()
객체에는 직접 map() 메서드를 사용할 수 없습니다. 따라서 Object.keys()로 객체의 키(key)들을 배열로 추출한 뒤, 그 배열에 map()을 적용하는 방식으로 활용합니다. 주로 객체의 키를 순회하며 값을 계산하거나 변환할 때 유용합니다.
Array.map()
배열에 직접 적용할 수 있는 메서드로, 각 요소를 콜백 함수로 처리한 결과를 새로운 배열로 반환합니다. 원본 배열은 변경되지 않으며, 데이터 변환 작업에 가장 널리 쓰이는 고차 함수 중 하나입니다.
예제 코드
다음은 Object.keys().map()과 Array.map()의 동작을 보여주는 JavaScript 예제입니다.
<!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;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>Object.keys().map() VS Array.map()</h1>
<div class="sample">{1:'A',22:'B',55:'C',19:'D'}</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 객체 키들의 합계가 계산됩니다</h3>
<div class="sample">[22,33,11,44]</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 배열의 각 요소가 2배로 변환됩니다</h3>
<script>
let resEle = document.querySelectorAll(".result");
let BtnEle = document.querySelectorAll(".Btn");
let obj = { 1: "A", 22: "B", 55: "C", 19: "D" };
let arr = [22, 33, 11, 44];
let total = 0;
BtnEle[0].addEventListener("click", () => {
Object.keys(obj).map((x) => (total += parseInt(x)));
resEle[0].innerHTML = "The sum of the object keys = " + total;
});
BtnEle[1].addEventListener("click", () => {
resEle[1].innerHTML = arr.map((x) => x * 2);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
첫 번째 'CLICK HERE' 버튼 클릭 시
Object.keys(obj)가 객체 {1:'A', 22:'B', 55:'C', 19:'D'}의 키인 [1, 22, 55, 19]를 배열로 반환하고, map()이 각 키를 정수로 변환해 모두 더한 결과를 화면에 표시합니다.
두 번째 'CLICK HERE' 버튼 클릭 시
Array.map()이 배열 [22, 33, 11, 44]의 각 요소에 2를 곱하여 [44, 66, 22, 88]이라는 새로운 배열을 생성하고 결과로 출력합니다.
정리
Object.keys().map()은 객체의 키를 다루기 위한 우회 방법이고, Array.map()은 배열 전용 메서드라는 점이 핵심 차이입니다. 객체를 순회해야 한다면 Object.keys(), Object.values(), 또는 Object.entries()와 함께 map()을 조합해 사용하는 것이 일반적인 패턴입니다.