02 - The forEach Helper

Section 02: The forEach Helper

• The forEach Helper
• [Exercise] Moving Away From For Loops
• [Exercise] Processing Values

The forEach Helper

The forEach() method executes a provided function once for each array element.

let colors = ['red', 'blue', 'green'];

// loop the array by using for loop
for (let i = 0; i < colors.legnth; i++) {
  console.log(colors[i]);
}

// loop the array by using forEach method
colors.forEach(color => console.log(color));

Let's see another example, we're going to use forEach() helper to calculate the sum of a list of numbers.

let sum = 0                     // create a variable to hold the sum
let numbers = [1, 2, 3, 4, 5];  // create an array of numbers to be added

// loop over the array with forEach() helper
numbers.forEach(num => sum += num);

Note that the forEach() helper is kind of Swiss Army Knife of array helpers and every other helpers could be reimplemented using forEach() helper.

[ ↥ Back To Top ]

[Exercise] Moving Away From For Loops

Question

The code below is calling savePost three times, but it is doing so using a for loop. This implementation works, but the for loop makes it more challenging to understand the purpose of the function. Rather than using a for loop, refactor the code below to instead use the forEach helper.

function handlePosts() {
  var posts = [
    { id: 23, title: 'Daily JS News' },
    { id: 52, title: 'Code Refactor City' },
    { id: 105, title: 'The Brightest Ruby' }
  ];

  for (var i = 0; i < posts.length; i++) {
    savePost(posts[i]);
  }
}

Solution

function handlePosts() {
  let posts = [
    { id: 23, title: 'Daily JS News' },
    { id: 52, title: 'Code Refactor City' },
    { id: 105, title: 'The Brightest Ruby' }
  ];

  posts.forEach(post => savePost(post));
}

[ ↥ Back To Top ]

[Exercise] Processing Values

Question

The array below contains an array of objects, each of which is a representation of an image. Using the forEach() helper, calculate the area of each image and store it in a new array called areas. The area of an image can be calculated as image.height * image.width.

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

Solution

let images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];

let areas = [];
images.forEach(image => areas.push(image.height * image.width));

[ ↥ Back To Top ]