JavaScript .map()

Creates a new array with the results of calling a function for every element in array.

Syntax

array.map((element, index, array) => {...});

The callback function accepts the following parameters:

• element (required): The current element we are iterating through.
• index (optional): The index of the current element we are iterating through.
• array (optional): The array that .map() was called on.

Examples

Create a new array which doubles the values in numbers:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((value) => value * 2);

console.log(doubled);
// Output: [2, 4, 6, 8, 10]

Copy to clipboard
Copy to clipboard

Create an array of full names from the students array full of objects:

const students = [
  { first_name: 'Samantha', last_name: 'Jones' },
  { first_name: 'Hector', last_name: 'Gonzales' },
  { first_name: 'Jeremiah', last_name: 'Duncan' },
];

const fullNames = students.map((student) => {
  return `${student.first_name} ${student.last_name}`;
});

console.log(fullNames);
// Output: ['Samantha Jones', 'Hector Gonzales', 'Jeremiah Duncan']

Copy to clipboard
Copy to clipboard

Codebyte Example

The example below defines a new array teachers. Next, the results of the .map() method are stored in a new variable, array courses. Finally, the items of the courses array are logged to the console.

Visit us
Visit us
Hide code
Code
Output
Hide output
Loading...
Copy to your clipboard
Copy Codebyte
Run