JavaScriptArraysBeginner

Array.map()

Creates a new array by transforming every element with a callback.

Review the syntaxStudy the examplesOpen the coding app
array.map(callbackFn, thisArg?)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Creates a new array by transforming every element with a callback.

The map() method creates a new array populated with the results of calling a provided callbackFn on every element in the calling array. It is a non-mutating method, meaning the original array remains unchanged. Performance-wise, map() has a time complexity of O(n) and a space complexity of O(n) as it allocates memory for a new array of the same length. It skips empty slots in sparse arrays but executes on elements explicitly set to undefined or null. Since it returns a new array, it is ideal for functional programming patterns where data immutability is prioritized. Note that while map() is highly readable, it has a slight overhead compared to a standard for-loop due to the per-iteration function call stack. It should not be used if the callback does not return a value, or if you are trying to perform side effects only (use forEach instead).

Quick reference

Syntax

array.map(callbackFn, thisArg?)

Inputs

Parameters

callbackFunction · Runs for each element and returns the new value.
thisArg (optional)any · Value used as 'this' inside callback.

See it in practice

Examples

1

Basic Numeric Transformation

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
  return num * 2;
});
Output:
[2, 4, 6, 8]

A simple use case converting each number in an array to its double.

2

Extracting Properties from Objects

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
const names = users.map(user => user.name);
Output:
['Alice', 'Bob']

Commonly used in frontend development to extract specific fields from a dataset for display.

3

Using Index and Original Array

const values = [10, 20, 30];
const detailed = values.map((val, index) => {
  return 'Item ' + index + ' is ' + val;
});
Output:
['Item 0 is 10', 'Item 1 is 20', 'Item 2 is 30']

The callbackFn provides the current index, which can be used for descriptive string formatting.

Debug faster

Common Errors

1

LogicError

Cause: Forgetting to return a value from the callbackFn, resulting in an array of undefined.

Fix: Ensure the callback function includes a return statement or uses the implicit return of arrow functions.

const result = [1, 2].map(num => { num * 2 }); // returns [undefined, undefined]
2

TypeError

Cause: Attempting to call map() on a value that is not an array, such as null or an object.

Fix: Verify that the variable is an array using Array.isArray() before mapping, or use an empty array as a fallback.

const data = null;
const result = (data || []).map(item => item);
3

LogicError

Cause: Using map() to filter elements out of an array.

Fix: Use the filter() method instead, as map() always returns an array of the exact same length as the original.

const evens = [1, 2, 3].map(n => n % 2 === 0 ? n : null); // returns [null, 2, null]

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE9+ES5 (2009)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Creates a new array by transforming every element with a callback.

callback: Runs for each element and returns the new value. thisArg: Value used as 'this' inside callback.

LogicError: Ensure the callback function includes a return statement or uses the implicit return of arrow functions. TypeError: Verify that the variable is an array using Array.isArray() before mapping, or use an empty array as a fallback. LogicError: Use the filter() method instead, as map() always returns an array of the exact same length as the original.