Skip to main content Accessibility Feedback

How to use the items in an array to create a new one with vanilla JavaScript

Today, we’re going to look at the method, and how you can use it to create new arrays from existing ones. Let’s dig in!

An example

Imagine you have an array of numbers.

let numbers = [1, 4, 9];

You want to create a new array with the values doubled.

Traditionally, you might use a for...of loop and the Array.push() method to handle this for you.

// Create a new array
let doubled = [];

// Double each value and push it into the new array
for (let num of numbers) {
	doubled.push(num * 2);

The method simplifies this.

Here’s a demo.

How the method works

You call the method on an array, and pass in a callback function that accepts three arguments: the current item in the loop, its index, and the array itself. All three are optional.

Whatever you return inside the callback function becomes the new value at that index in the new array.

Here’s how we could use it to create our doubled array.

let doubled = {
	return num * 2;

Here’s another demo.

As you can see, this is a lot more short and concise.

A more complex example

Here, we have an array of data about some employees.

 * Get an array of just names
let data = [
		name: 'Kyle',
		occupation: 'Fashion Designer'
		name: 'Liza',
		occupation: 'Web Developer'
		name: 'Emily',
		occupation: 'Web Designer'
		name: 'Melissa',
		occupation: 'Fashion Designer'
		name: 'Tom',
		occupation: 'Web Developer'

We want to create an array of just their names. With, we would do this.

let names = (item) {

When would you ever use the third array parameter?

The third parameter in the callback function is the array that the method was called on. If you’re calling it on an array, when would you ever actually need that?

The argument is useful if you have an array that’s not assigned to a variable.

You might create an array and then immediately run on it. Or you might be chaining with another array method.

let wizardIDs = ['Merlin', 'Gandalf', 'Ursula'].map(function (wizard, index, allWizards) {
	if (allWizards.length > 2) {
		console.log(`Wow, that's a lot of wizards!`);
	} else {
		console.log(`Not that many wizards?`);
	return `${index}_${wizard}`;