Map: Another Higher Order Function

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

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.

Comments

[Ben Halpern]

Another great post, Tiffany.

[tiff]

Thanks Ben!

[Angel Diaz]

Thanks Tiffany. Useful.

[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!

[Steven Washington]

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

[tiff]

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

[jonathon]

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

[tiff]

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

[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!

[tiff]

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

[Saurabh Sharma]

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

One for filter too Filter