Arrays

How to Transform Array Elements

Use .map() to create a new array with transformed elements

Quick Answer (2024 ES6+ Way)

javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

Live Example

javascript

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const names = users.map(user => user.name);
console.log(names);

Common Variations

With Index

javascript

const items = ['a', 'b', 'c'];
const indexed = items.map((item, index) => `${index}: ${item}`);
// ['0: a', '1: b', '2: c']

Conditional Transformation

javascript

const numbers = [1, 2, 3, 4];
const evens = numbers.map(num => num % 2 === 0 ? num * 2 : num);
// [1, 4, 3, 8]

❌ Don't Do This (Outdated Way)

Avoid using for loops or jQuery for array transformation

javascript

// DON'T DO THIS
var doubled = [];
for (var i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

Browser Support

✓ Works in all modern browsers (ES5+)

#map#array#transform