# Map: Another Higher Order Function

Map is another higher order function that goes through an array and doesn’t discard it but instead transforms/mutates it.

Here, I’d like to get an array of all the names of the animals.

``````const animals = [
{ name: ‘Catticus Finch’,  species: ‘cat’ },
{ name: ‘Peaches’,         species: ‘fish’ },
{ name: ‘Bobby’,           species: ‘dog’ },
{ name: ‘Lucifer’,         species: ‘cat’ },
{ name: ‘Beatrix’,         species: ‘rabbit’ },
{ name: ‘Cerulean’,        species: ‘fish’ }
];
``````

Here’s how we would accomplish this with a for loop:

``````var names = [];

for (var i = 0; i < animals.length i++) {
names.push(animals[i].name);
}
``````

The function `.filter` expects a boolean, but `.map` expects a callback function to return a transformed object it will push into a new array.

To return the names of each of the animals in code:

In ES5:

``````var names = animals.map(function() {
return animal.name;
});
``````

In ES6:

``````const names = animals.map(animal => animal.name);
``````

You can use `.map` to return a subset of an array. Since it expects a callback to return an object, we can make new objects.

In ES5

``````var names = animals.map(function(animal) {
return animal.name + ‘ is a ‘ + animal.species;
});
``````

In ES6

``````const names = animals.map(animal => animal.name + ‘is a ‘ + animal.species);
``````

## Easier Array Manipulation with Higher Order Functions

`.map()` and `.filter()` are just a couple of higher order functions you can use to manipulate and iterate over arrays.

Map is another higher order function that goes through an array and doesn’t discard it but instead transforms/mutates it.

Here, I’d like to get an array of all the names of the animals.

``````const animals = [
{ name: ‘Catticus Finch’,  species: ‘cat’ },
{ name: ‘Peaches’,         species: ‘fish’ },
{ name: ‘Bobby’,           species: ‘dog’ },
{ name: ‘Lucifer’,         species: ‘cat’ },
{ name: ‘Beatrix’,         species: ‘rabbit’ },
{ name: ‘Cerulean’,        species: ‘fish’ }
];
``````

Here’s how we would accomplish this with a for loop:

``````var names = [];

for (var i = 0; i &lt; animals.length i+) {
names.push(animals[i].name);
}
``````

The function `.filter` expects a boolean, but `.map` expects a callback function to return a transformed object it will push into a new array.

To return the names of each of the animals in code:

In ES5:

``````var names = animals.map(function() {
return animal.name;
});
``````

In ES6:

``````const names = animals.map(animal => animal.name);
``````

You can use `.map` to return a subset of an array. Since it expects a callback to return an object, we can make new objects.

In ES5

``````var names = animals.map(function(animal) {
return animal.name + ‘ is a ‘ + animal.species;
});
``````

In ES6

``````const names = animals.map(animal => animal.name + ‘is a ‘ + animal.species);
``````

## Easier Array Manipulation with Higher Order Functions

`.map()` and `.filter()` are just a couple of higher order functions you can use to manipulate and iterate over arrays.

You can check out this link for further reading.

### Subscribe to Tiffany R. White Blog

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe