Tiffany R. White Blog

Dark Mode
Light Mode

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.

You can check out this link for further reading.

Share article
LinkedIn

Discuss on TwitterEdit on GitHub


Tiffany R. White Blog

Tiffany White

Blog of Tiffany White. Thoughts on React & web development. My stuff: /uses.