🟨JavaScript forEach()

going through each element in an array

Motivation

Suppose we have an array and we wish to iterate through each of its elements:

We could use a forloop as we saw in the loops page, or we could use a cleaner, high-order forEach method like such:

const grades = [58, 60, 60, 90, 99]

// we could do this
for (let i = 0; i < grades.length; i++) {
    console.log(grades[i] + 10)
}

// or we could do this
grades.forEach(function (grade) {
    console.log(grade + 10)
})

// we could even do this to look even "more skilled"
grades.forEach(grade => console.log(grade + 10))

Take note of the inner curly braces {} and the outer brackets () in forEach!

In the example above, the forEach takes each element (i.e. each grade) and logs its value (plus 10) to the console...

Contrast this with the for loop where we have to set up an initial iteration value, evaluate a condition, then increment the initial iteration value ... here we just write down what we want to do to each element of the array!

We call the function inside the forEachmethod, a callback function, as it calls itself back when we call forEach!

We do not need to write any code to determine our position in the array; JavaScript takes care of this!

We need now only focus on what we want to do with each element 😄

Addition

In addition to the current element of the iteration, the forEachmethod also has two optional parameters:

• the index of the current element

• the original array showing all the elements

For example, we could provide more detail to the message logged to the console:

const grades = [58, 60, 60, 90, 99]

grades.forEach(function (grade, index, array) {
    if (index === 0) console.log(`Original grades: ${array}`)
    console.log(`Grade number ${index + 1} is now: ${grade + 10}`)
})

Logging only the original grades in the first iteration with that ifstatement, this will log:

Original grades: 58,60,60,90,99
Grade number 1 is now: 68
Grade number 2 is now: 70
Grade number 3 is now: 70
Grade number 4 is now: 100
Grade number 5 is now: 109

Summary

Remember that forEach():

• always returns undefined

• iterates through each element in the array and calls other functions to output a result

• does not modify the original array

• does not create a new array

• other than throwing an exception, we cannot break out of a forEach