JavaScript map method
last modified April 4, 2025
In this article we show how to transform arrays using the map method
in JavaScript.
Array transformation
The map method creates a new array populated with the results of
calling a provided function on every element in the calling array. It does not
modify the original array, making it a pure function when used correctly.
This method is commonly used when you need to transform each element in an array
according to specific logic. The map method executes the callback
function once for each element in order and constructs a new array from the
results.
The callback function can take three arguments: the current element being
processed, its index, and the array map was called upon. The
map method is chainable and often used with other array methods.
Basic map example
The following example demonstrates the basic usage of the map
method.
const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(numbers); // Original array unchanged console.log(doubled); // New transformed array
We create an array and use map to double each number. The original
array remains unmodified. The map() method returns a new array with transformed
values.
$ node main.js [ 1, 2, 3, 4 ] [ 2, 4, 6, 8 ]
Mapping objects to new structures
The map method is often used to transform arrays of objects.
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
const names = users.map(user => user.name);
const ages = users.map(user => ({ age: user.age }));
console.log(names);
console.log(ages);
We transform an array of user objects into arrays of names and age objects. The callback function extracts specific properties from each object. Note the parentheses around the object literal in the arrow function.
$ node main.js
[ 'John', 'Jane' ]
[ { age: 25 }, { age: 30 } ]
Using map with index parameter
The callback function can access the current element's index.
const fruits = ['apple', 'banana', 'cherry'];
const indexedFruits = fruits.map((fruit, index) =>
`${index + 1}. ${fruit.toUpperCase()}`
);
console.log(indexedFruits);
We transform an array of fruits by adding their position numbers. The index parameter (second argument) provides the current element's position. We use template literals for string interpolation.
$ node main.js [ '1. APPLE', '2. BANANA', '3. CHERRY' ]
Mapping with external functions
The callback function can be defined separately and passed to map.
function squareRoot(num) {
return Math.sqrt(num).toFixed(2);
}
const numbers = [4, 9, 16, 25];
const roots = numbers.map(squareRoot);
console.log(roots);
We define a separate squareRoot function that calculates square
roots. The map method applies this function to each element. The
toFixed method formats the results to two decimal places.
$ node main.js [ '2.00', '3.00', '4.00', '5.00' ]
Chaining map with other array methods
The map method can be chained with other array methods.
const numbers = [1, 2, 3, 4, 5, 6]; const result = numbers .filter(n => n % 2 === 0) .map(n => n * 10) .reverse(); console.log(result);
We first filter even numbers, then multiply them by 10, and finally reverse the array. Each method returns a new array, allowing method chaining. This approach is common in functional programming.
$ node main.js [ 60, 40, 20 ]
Source
Array map - language reference
In this article we have demonstrated how to use the map() method to transform arrays in JavaScript.