Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Object.keys().map() VS Array.map() in JavaScript
In JavaScript, Object.keys().map() and Array.map() serve different purposes. Object.keys() extracts object keys as an array, then applies map(), while Array.map() directly transforms array elements.
Understanding Object.keys()
Object.keys() returns an array of an object's property names (keys). When chained with map(), it allows you to transform these keys.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Keys Example</title>
</head>
<body>
<div id="result1"></div>
<script>
let obj = { 1: "A", 22: "B", 55: "C", 19: "D" };
// Get keys as array
let keys = Object.keys(obj);
console.log("Object keys:", keys);
// Sum all keys using Object.keys().map()
let sum = 0;
Object.keys(obj).map(key => sum += parseInt(key));
document.getElementById("result1").innerHTML =
"Keys: " + keys.join(", ") + "<br>" +
"Sum of keys: " + sum;
</script>
</body>
</html>
Array.map() Method
Array.map() creates a new array by calling a function on each element of the original array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Map Example</title>
</head>
<body>
<div id="result2"></div>
<script>
let arr = [22, 33, 11, 44];
// Double each element using Array.map()
let doubled = arr.map(x => x * 2);
console.log("Original array:", arr);
console.log("Doubled array:", doubled);
document.getElementById("result2").innerHTML =
"Original: [" + arr.join(", ") + "]<br>" +
"Doubled: [" + doubled.join(", ") + "]";
</script>
</body>
</html>
Side-by-Side Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.keys().map() VS Array.map()</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.example {
margin: 20px 0;
padding: 15px;
border: 2px solid #ddd;
border-radius: 5px;
}
.result {
font-size: 16px;
color: #333;
margin: 10px 0;
}
button {
padding: 10px 20px;
margin: 5px;
background: #007cba;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Object.keys().map() VS Array.map()</h1>
<div class="example">
<h3>Object: {1:'A', 22:'B', 55:'C', 19:'D'}</h3>
<button onclick="processObject()">Sum Object Keys</button>
<div id="objectResult" class="result"></div>
</div>
<div class="example">
<h3>Array: [22, 33, 11, 44]</h3>
<button onclick="processArray()">Double Array Elements</button>
<div id="arrayResult" class="result"></div>
</div>
<script>
let obj = { 1: "A", 22: "B", 55: "C", 19: "D" };
let arr = [22, 33, 11, 44];
function processObject() {
let total = 0;
Object.keys(obj).map(key => total += parseInt(key));
document.getElementById("objectResult").innerHTML =
"Object keys: [" + Object.keys(obj).join(", ") + "]<br>" +
"Sum of keys: " + total;
}
function processArray() {
let doubled = arr.map(x => x * 2);
document.getElementById("arrayResult").innerHTML =
"Original: [" + arr.join(", ") + "]<br>" +
"Doubled: [" + doubled.join(", ") + "]";
}
</script>
</body>
</html>
Key Differences
| Method | Purpose | Input | Output |
|---|---|---|---|
Object.keys().map() |
Transform object keys | Object | Array of transformed keys |
Array.map() |
Transform array elements | Array | New array of transformed elements |
Common Use Cases
Object.keys().map(): Converting object keys to numbers, filtering object properties, or creating arrays from object keys.
Array.map(): Mathematical operations on arrays, data formatting, or transforming array elements into different structures.
Conclusion
Use Object.keys().map() when you need to work with object properties as an array. Use Array.map() for direct array transformations. Both return new arrays without modifying the original data.
853 Views
