03 - The map Helper

Section 03: The map Helper

• The map Helper
• [Exercise] Plucking Values
• [Exercise] Calculate Values with map()
• [Exercise] Implement Pluck

The map Helper

The map() method executes a provided function once for each array element and creates a new array with the results. Make sure that we have the return keyword in the given function.

let numbers = [1, 2, 3];
let doubleNumbers = [];

// loop the array by using for loop
for (let i = 0; i < numbers.length; i++) {
  doubleNumbers.push(numbers[i] * 2);
}

// loop the array by using map() method
doubleNumbers = numbers.map(number => number *2);

Note that the map() method doesn't change the original array. Let's see another example which would be frequently with client side rendering frameworks like React or Angular.

let cars = [
  { model: 'Buick', price: 'cheap' },
  { model: 'Camaro', price: 'expensive' }
];

let prices = cars.map(car => car.price);

[ ↥ Back To Top ]

[Exercise] Plucking Values

Question

Using map(), create a new array that contains the height property of each object. Assign this new array to the variable heights. Don't forget to use the return keyword in the function!

var images = [
  { height: '34px', width: '39px' },
  { height: '54px', width: '19px' },
  { height: '83px', width: '75px' },
];

var heights;

Solution

let images = [
  { height: '34px', width: '39px' },
  { height: '54px', width: '19px' },
  { height: '83px', width: '75px' },
];

let heights = images.map(image => image.height);

[ ↥ Back To Top ]

[Exercise] Calculate Values with map()

Using map(), create a new array that contains the (distance / time) value from each trip. In other words, the new array should contain the (distance / time) value. Assign the result to the variable speeds.

Question

var trips = [
  { distance: 34, time: 10 },
  { distance: 90, time: 50 },
  { distance: 59, time: 25 }
];

var speeds;

Solution

let trips = [
  { distance: 34, time: 10 },
  { distance: 90, time: 50 },
  { distance: 59, time: 25 }
];

let speeds = trips.map(trip => trip.distance / trip.time);

[ ↥ Back To Top ]

[Exercise] Implement Pluck

Question

Implement a pluck function. Pluck should accept an array and a string representing a property name and return an array containing that property from each object.

Example

var paints = [ { color: 'red' }, { color: 'blue' }, { color: 'yellow' }];

// returns ['red', 'yellow', 'blue']
pluck(paints, 'color');

Hint

Remember that you can access a property on an object by using square bracket notation.

var person = { name: 'Bill' };
// returns 'Bill'
person['name'];

Solution

function pluck(array, property) {
  return array.map(object => object[property]);
}

[ ↥ Back To Top ]