Map: Another Higher Order Function | Tiffany R. White Blog

Map: Another Higher Order Function

Reading time: 5 mins

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.


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter