Array.map() Map to a new array
Last updated: 2026-09-09
Array.map() Map to a new array
map runs the callback per element and builds a new array of the same length from the results; the original is untouched. The go-to for data transformation.
| Category | Arrays |
|---|---|
| ES version | ES5 (2009) |
📝 Syntax
const newArray = array.map((element, index, array) => transformed);⚙️ Parameters
| callback | Transform function; its return value becomes the element in the new array. |
|---|---|
| thisArg | Optional. this inside the callback. |
Returns：A new array of the same length.
Mutates the original：No (returns a new value)
▶ Example
Edit the code, press Run, and see the result in the output panel:
Output：
[ 2, 4, 6, 8 ]
[ 'Zhang', 'Li' ]
[ '1. Zhang', '2. Li' ]⚠️ Warning The callback must return — `x => { x * 2 }` (braces, no return) yields an array of undefined.
💡 Tip map keeps length, filter shrinks, reduce folds to one — the three essentials.
🌐 Browser support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| Array.map() | ✓ v1 | ✓ v12 | ✓ v1.5 | ✓ v3 | ✓ v10.5 |
| Supported by all modern browsers | |||||
🏷️ Related Array Methods
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
❓ FAQ
Qmap vs forEach?
Amap returns a new array for transformation; forEach returns nothing for side effects only.
QCan map skip elements?
Amap is always the same length — filter first, or return the original element.
QDoes map mutate the original?
ANo. But mutating shared object elements inside the callback affects the original array too.
