loading...
Cover image for Map: Another Higher Order Function

Map: Another Higher Order Function

tiffany profile image Tiffany White Updated on ・2 min read

This was originally published on my blog.

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 }
];
Enter fullscreen mode Exit fullscreen mode

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); 
}
Enter fullscreen mode Exit fullscreen mode

...where we're iterating through the array and pushing the value of the name property into the empty animals array.

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;
});
Enter fullscreen mode Exit fullscreen mode

In ES6:

const names = animals.map((animal) => animal.name );
Enter fullscreen mode Exit fullscreen mode

names_map_gif

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;
});
Enter fullscreen mode Exit fullscreen mode

In ES6

const names = animals.map((animal) => animal.name + ‘ is a ‘ + animal.species );
Enter fullscreen mode Exit fullscreen mode

names_species_gif

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.

Discussion

pic
Editor guide
Collapse
washingtonsteven profile image
Steven Washington

Thanks for the run down! I feel like my array game is supercharged after learning about these array functions.

Collapse
tiffany profile image
Tiffany White Author

Yeah mine too. Working on refactoring a project and see many, many places I could use these functions.

Collapse
stefandorresteijn profile image
Stefan Dorresteijn

I'm pretty sure the map function is what I use most in any language. If you're working with data (especially from REST apis), you do so much data transforming that you really can't live without a map function.

Great post!

Collapse
jbbn profile image
João Bueno

Great post Tiffany!

In ES6, I really like to do stuff like this:

const names = animals.map(({name, species}) => `${name} is a ${species}`);

Keep up the great work!

Collapse
tiffany profile image
Tiffany White Author

Template literals are the sh*t! Yeah. I should have done that but didn't think to use it there. Thanks for the suggestion!

Collapse
jsdbroughton profile image
jonathon

If you find yourself using .map().filter or .filter().map() a lot then invest some time learning .reduce()

Collapse
tiffany profile image
Tiffany White Author

Definitely. I was just posting each function in different posts. This is my next one!

Collapse
ben profile image
Ben Halpern

Another great post, Tiffany.

Collapse
tiffany profile image
Collapse
itsjzt profile image
Saurabh Sharma

here is a good video on using map Map - Part 2 of Functional Programming in JavaScript

One for filter too Filter

Collapse
angelitodiaz1 profile image
Angel Diaz

Thanks Tiffany. Useful.