1. Pure Array Transformations

The .map() method creates a new array populated with the results of calling a provided callback function on every element in the calling array.

2. Why It Matters

.map() is non-mutating (pure). It leaves the original array untouched and returns a brand new transformed array of identical length. It powers UI rendering in frameworks like React (items.map(item => <ItemCard />)).

3. The Pattern

Pass a callback function to .map() that receives (item, index, array) and returns the transformed item:

const prices = [10, 20, 30];

// Double every price
const doubledPrices = prices.map((price) => price * 2);

console.log(doubledPrices); // [20, 40, 60]
console.log(prices);        // [10, 20, 30] (Original array untouched!)

4. Transforming Objects in Arrays

.map() is frequently used to extract or reformat properties from array object lists:

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Sarah" },
];

// Extract just names into a string array
const names = users.map((user) => user.name);
console.log(names); // ["Alex", "Sarah"]

5. Common Mistakes

• Forgetting to Return Inside Callback: If your callback function inside .map() does not explicitly return a value (or use an implicit 1-line arrow return), the new array will be filled with undefined!
• Using .map() When You Don't Want a Return Array: If you are not using the returned array and just want to iterate with side effects, use .forEach(), not .map().

6. Try It Yourself

Write it yourself. The tests below run against your code.

function doublePrices(prices) {
  return [];
}

7. Next Steps

Use .map() whenever you want to transform items 1-to-1. Next, let's learn how to filter arrays using .filter()!