# Map, Another Higher Order Function

September 09, 2017 • ☕️ 2 min read

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.