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 }
];

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); 
}

...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;
});

In ES6:

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

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;
});

In ES6

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

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.

Posted on by:

tiffany profile

Tiffany White

@tiffany

Open source enthusiast, autodidact, JavaScript hacker, React fangirl and herder of cats 🐈.

Discussion

markdown guide
 

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

 

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

 

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!

 

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!

 

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

 

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

 

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