iteration
Array.prototype.map
Creates a new array populated with the results of calling a callback on every element of the calling array. Reach for it whenever you want to transform each element 1-to-1 into a new value.
arr.map(callbackFn[, thisArg])Parameters
| Parameter | Purpose |
|---|---|
| callbackFn(element, index, array) | Function whose return value becomes the new element |
| thisArg | Value used as `this` inside callbackFn |
Examples
console.log([1,2,3].map(n => n * 2));Logs: [2, 4, 6]
console.log(['a','b','c'].map((v, i) => `${i}:${v}`));Logs: ['0:a', '1:b', '2:c']
console.log([{n:'Ada'},{n:'Ben'}].map(u => u.n));Logs: ['Ada', 'Ben']
console.log(['1','2','3'].map(Number));Logs: [1, 2, 3]
Gotcha
map returns a new array; forEach returns undefined. Passing parseInt directly (`.map(parseInt)`) breaks because parseInt receives the index as radix — use `.map(Number)` or `.map(s => parseInt(s, 10))`.
Related methods
Array.prototype.forEach
Executes a provided callback once for each array element, in ascending order. Reach for it when you need side effects (logging, DOM updates, pushing to another store) and do not need a return value.
Array.prototype.flatMap
Maps each element with a callback, then flattens the result by one level (ES2019). Reach for it when a mapper naturally returns arrays and you want a single flat list back.
Array.prototype.filter
Creates a new array containing every element for which the callback returned a truthy value. Reach for it to pare a list down to items matching a predicate.
Array.prototype.reduce
Runs a reducer function on each element, left-to-right, folding the array into a single accumulated value. Reach for it to sum/product/group/build an object or any custom fold.
Array.prototype.some
Returns true if the callback returns truthy for at least one element, short-circuiting on the first hit. Reach for it to answer "does anything match?" without walking the full array.