**map()** transforms every element and returns a new array of the same length. It's the functional alternative to a for loop that builds a new array. Always returns an array — if you need to combine or filter, chain with **filter()** or **reduce()**.
1Understanding Array.map()
map() transforms every element and returns a new array of the same length. It's the functional alternative to a for loop that builds a new array. Always returns an array — if you need to combine or filter, chain with filter() or reduce().
map() always returns an array of the same length. If you want to skip elements, use filter(). If you want both, use flatMap() or filter().map().
// Transform data
const prices = [10, 20, 30, 40];
const withTax = prices.map(p => p * 1.2);
console.log(withTax); // [12, 24, 36, 48]
// Extract property from array of objects
const users = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
const names = users.map(u => u.name);
console.log(names); // ['Alice', 'Bob']2Practical Example
Here is a real-world application of Array.map() showing how it is used in production JavaScript code.
// map + destructuring
const pairs = [[1, 'one'], [2, 'two'], [3, 'three']];
const obj = Object.fromEntries(pairs.map(([num, word]) => [word, num]));
console.log(obj); // { one: 1, two: 2, three: 3 }3Best Practices
Follow these guidelines when working with Array.map():
1. Never use map() just for side effects — use forEach instead
2. Keep map callbacks pure (no external state changes)
3. Chain map() with filter() for data pipelines
Tip: map() always returns an array of the same length. If you want to skip elements, use filter(). If you want both, use flatMap() or filter().map().
// Transform data
const prices = [10, 20, 30, 40];
const withTax = prices.map(p => p * 1.2);
console.log(withTax); // [12, 24, 36, 48]
// Extract property from array of objects
const users = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
const names = users.map(u => u.name);
console.log(names); // ['Alice', 'Bob']