The forEach loop

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

The forEach loop

All arrays contain a forEach method. It helps you loop through every item in an array in a simple-to-read manner. I highly recommend learning it.

The forEach syntax

The forEach method takes in a callback. This callback takes three arguments:

array.forEach((currentValue, index, array) => {
  // Your loop here
})

• currentValue refers to the current item in the array
• index is the position of the item within the array. The first item has an index of 0; the second, an index of 1; and so on
• array refers to the array that you’re looping over. You don’t need this argument most of the time

When you’re looping over arrays, you’re mostly concerned only with the currentValue. You can safely omit the other arguments if you don’t need them. So, the forEach loop often looks like this:

array.forEach(currentValue => {
  // Your statement here
})

An example

Let’s say you have a fruit basket that contains the following fruits. You can use the forEach method to loop over each item. Here’s how the forEach method looks in comparison to for loops.

const fruitBasket = ['banana', 'pear', 'guava']

// The forEach loop
fruitBasket.forEach(function(fruit) {
  console.log(fruit)
})

// For...of loop
for (let fruit of fruitBasket) {
  console.log(fruit)
}

// For loop
for (let i = 0; i < fruitBasket.length; i++) {
  console.log(fruitBasket[i])
}

As you can see, there’s not much of a difference between for...of and forEach. Both are much easier to use compared to a for loop.

However, with arrow functions, you can reduce a forEach statement to a one-liner. This makes it easier to read and shorter to write.

fruitBasket.forEach(fruit => console.log(fruit))

For…of vs forEach

You can use either for...of or forEach to loop through all arrays. They do the same thing. I highly suggest you learn forEach properly.

I prefer forEach because it’s easier to read, shorter to write, which means it’s more maintainable and has less room for bugs to hide.

Furthermore, forEach is a good base to help you learn more advanced array methods like map, filter, reduce, find, some and every. Each method mentioned does a specific thing that’s way more useful than forEach or even for...of.

You will only use for...of over forEach if you need the increased speed performance. Most of the time, the speed improvements is negligible.

Exercise

Practice using forEach through an array of people (given below). Do the following:

1. console.log the first name of each person in the array.
2. Make a second array that contains only the first name of each person.
3. Make a third array that contains people that have died after 1950.
4. Find index of Charles Darwin in the array.

Here’s the list of people to use for this exercise:

const people = [
  { firstName: 'Benjamin', lastName: 'Franklin', yearOfDeath: 1790 },
  { firstName: 'Thomas', lastName: 'Edison', yearOfDeath: 1931 },
  { firstName: 'Franklin', lastName: 'Roosevelt', yearOfDeath: 1945 },
  { firstName: 'Napolean', lastName: 'Bonaparte', yearOfDeath: 1821 },
  { firstName: 'Abraham', lastName: 'Lincoln', yearOfDeath: 1865 },
  { firstName: 'Mother', lastName: 'Theresa', yearOfDeath: 1962 },
  { firstName: 'Mahatma', lastName: 'Gandhi', yearOfDeath: 1948 },
  { firstName: 'Winston', lastName: 'Churchill', yearOfDeath: 1965 },
  { firstName: 'Charles', lastName: 'Darwin', yearOfDeath: 1882 },
  { firstName: 'Albert', lastName: 'Einstein', yearOfDeath: 1955 },
  { firstName: 'Pablo', lastName: 'Picasso', yearOfDeath: 1973 },
  { firstName: 'Ludwig', lastName: 'Beethoven', yearOfDeath: 1827 },
  { firstName: 'Walt', lastName: 'Disney', yearOfDeath: 1966 },
  { firstName: 'Henry', lastName: 'Ford', yearOfDeath: 1947 },
  { firstName: 'Steve', lastName: 'Jobs', yearOfDeath: 2012 }
]