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
Selected Reading
How to transform JavaScript arrays using maps?
JavaScript's map() method creates a new array by transforming each element of the original array using a callback function. It's essential for functional programming and data transformation.
Syntax
array.map(callback(element, index, array))
Parameters
- callback - Function that transforms each element
- element - Current array element being processed
- index - Index of the current element (optional)
- array - The original array (optional)
Basic Example: Squaring Numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Arrays with Map</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.Btn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Transform JavaScript Arrays Using Maps</h1>
<div class="sample">Original Array: [22, 33, 44, 55]</div>
<br>
<div class="result"></div>
<br>
<button class="Btn">Square Each Element</button>
<h3>Click the button to square each element of the array</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let arr = [22, 33, 44, 55];
BtnEle.addEventListener("click", () => {
let squaredArr = arr.map((element) => element * element);
resEle.innerHTML = `Squared Array: [${squaredArr.join(", ")}]`;
});
</script>
</body>
</html>
More Transformation Examples
// Transform strings to uppercase
let fruits = ["apple", "banana", "orange"];
let upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);
// Transform numbers with index
let numbers = [1, 2, 3, 4];
let indexed = numbers.map((num, index) => `${index}: ${num}`);
console.log(indexed);
// Transform objects
let users = [{name: "John", age: 25}, {name: "Jane", age: 30}];
let names = users.map(user => user.name);
console.log(names);
[ 'APPLE', 'BANANA', 'ORANGE' ] [ '0: 1', '1: 2', '2: 3', '3: 4' ] [ 'John', 'Jane' ]
Key Points
-
map()returns a new array ? the original array is unchanged - The new array has the same length as the original
- Each element is transformed by the callback function
- Use
map()when you need to transform data, not filter it
Comparison with Other Methods
| Method | Purpose | Returns |
|---|---|---|
map() |
Transform each element | New array (same length) |
filter() |
Select elements | New array (potentially different length) |
forEach() |
Execute function for each element | undefined |
Conclusion
The map() method is perfect for transforming arrays while preserving their structure. Use it whenever you need to convert each element to a new value without changing the array length.
Updated on: 2026-03-15T23:18:59+05:30
154 Views
Advertisements