JavaScript: Map (Array .map & Map Object)

JavaScript has two major concepts called "Map": the Array.prototype.map() method and the Map object. Both are essential for modern JS development, but they serve different purposes.

1. Array .map() Method

map() is an array method that creates a new array by applying a function to each element of the original array. It does not mutate the original array.

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

• map() always returns a new array of the same length.
• The callback function receives: current value, index, and the whole array.

const arr = [3, 7, 9];
const result = arr.map((value, idx, array) => value + idx);
// result: [3, 8, 11]
    

Use Cases for Array map()

• Transforming arrays (e.g., numbers to strings, objects to new objects)
• Extracting properties from arrays of objects
• Chaining with filter() and reduce() for advanced data manipulation

2. Map Object (ES6)

The Map object is a collection of key-value pairs, where keys can be any type (not just strings or symbols, unlike objects). Maps remember the original insertion order of the keys.

const map = new Map();
map.set('name', 'Alice');
map.set(123, true);
map.set({ x: 1 }, [10, 20]);

console.log(map.get('name')); // 'Alice'
console.log(map.get(123));    // true
    

• Map keys can be objects, arrays, functions, numbers, etc.
• Fast lookups, insertion order preserved, easy iteration.

for (const [key, value] of map) {
  console.log(key, value);
}
    

When to Use Map vs Object

Summary

• Use Array.map() to transform values in an array and produce a new array.
• Use the Map object for key-value pairs when your keys aren't just strings, or you need insertion order.