JavaScript map() Method
🗺️ Transforming Your Array with map()
Imagine you have a list of user objects, each with names, emails, and IDs.
Your task is to extract the email addresses to send a newsletter.
If your first instinct is to use a for loop, you're not alone. But there's a better way: the map() method.
It transforms every element in an array and returns a new array.
✅ Basic syntax ✅ Transforming values ✅ Mapping objects ✅ Using index and array ✅ Chaining with other methods
#javascript #arrays #map #transform #functional #webdev #frontend #coding #tips
map() calls a function on every element in an array, and returns a new array with the results.
It does not mutate the original array.
const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(numbers); // [1, 2, 3]Basic syntax
array.map((element, index, array) => {
// return new value
});| Parameter | Description |
|---|---|
element | The current element being processed. |
index | The index of the current element. |
array | The original array map was called on. |
Transforming values
Double every number.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]Convert strings to uppercase.
const names = ["ada", "grace", "alan"];
const upper = names.map((name) => name.toUpperCase());
console.log(upper); // ["ADA", "GRACE", "ALAN"]Mapping objects
Extract a property from each object.
const users = [
{ name: "Ada", role: "admin" },
{ name: "Grace", role: "editor" },
];
const names = users.map((user) => user.name);
console.log(names); // ["Ada", "Grace"]Transform objects into a new shape.
const products = [
{ name: "Laptop", price: 1000 },
{ name: "Mouse", price: 50 },
];
const labels = products.map((p) => ({
label: `${p.name}: $${p.price}`,
}));
console.log(labels);
// [{ label: "Laptop: $1000" }, { label: "Mouse: $50" }]Using index and array
Use the index to generate values.
const items = ["a", "b", "c"];
const numbered = items.map((item, index) => `${index + 1}. ${item}`);
console.log(numbered); // ["1. a", "2. b", "3. c"]Use the original array for relative calculations.
const scores = [10, 20, 30];
const percentages = scores.map(
(score, _, arr) => score / arr.reduce((a, b) => a + b, 0),
);
console.log(percentages); // [0.167, 0.333, 0.5]Chaining with other methods
map() works well with filter() and reduce().
const users = [
{ name: "Ada", age: 25, active: true },
{ name: "Grace", age: 30, active: false },
{ name: "Alan", age: 35, active: true },
];
const activeNames = users.filter((u) => u.active).map((u) => u.name);
console.log(activeNames); // ["Ada", "Alan"]Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.
