JavaScript Algorithm : Array.forEach()

Array.prototype.forEach() - JavaScript | MDN

The forEach() method executes a callback function for each element in the array. What does that mean? The ‘forEach’ method calls a function that’s outside of forEach and that handles the iteration for the array that it’s checking. Let’s look closely how it really works.

forEach: callback function

We are handling an array called flowers. Each element in the array are strings of flower names. Let’s write a callback function and the default arguments are ( each element , index , original array )and you can console log the function or anything but for this lesson, we will console log. Then theforEachmethod will execute the call back function.

ArrayName.forEach((eachEle, index, array) => console.log(eachEle))

forEach: inline callback function

This is the same as above — the forEach method executing the callback function in one line.

forEach: arrow function

This is using the anonymous arrow function, which is most commonly used. All of these three forEach methods will output these below. Please keep in mind that .forEach’s return values are undefined.

peony 0 [ 'peony', 'rose', 'sunflower', 'linaria' ]
rose 1 [ 'peony', 'rose', 'sunflower', 'linaria' ]
sunflower 2 [ 'peony', 'rose', 'sunflower', 'linaria' ]
linaria 3 [ 'peony', 'rose', 'sunflower', 'linaria' ]

Let’s practice some algorithms that are a little bit more complicated.

There are multiple flowers in the garden. Which flowers are there only two of in the garden?

We have an array structure with strings of flower name then we iterate the array using forEach method. For each name of the flower, we will add count if that flower exists in the count object, key-value pair. If it doesn’t exist already, then we will set up at 1. Then outside of that iteration, we will iterate the object we created and find which flower there are two of.

Let’s notice that the object, count. It’s declared outside of the .forEach iteration.

{ 
  peony: 2, 
  rose: 3, 
  sunflower: 1, 
  linaria: 1 
}
.forEach method only returns `undefined`

forEach doesn’t allow a variable to be declared inside the loop. You can’t use if statement inside the forEachmethod and return a value either. The way you can use it is that declaring the variable outside of the forEach iteration then returning outside or manipulating that data.

if condition inside forEach's anonymous function does not work

Please take a look at this StackOverflow question and answer.

//THIS DOES NOT WORK 
function isUniform(myArray) {
    myArray.forEach(function(element) {
        if (element !== myArray[0]) {
            return false;
        }
    });

    return true;
}
//THIS WORKS
function isUniform(myArray) {
    var passing = true;
    myArray.forEach(function(element) {
        if (element !== myArray[0]) {
            passing = false;
        }
    });

    return passing;
}
// 'for - of' loop works too
function isUniform(myArray) {
    for (element of myArray) {
        if (element !== myArray[0]) {
            return false
        }
    }
    return true
}

You can instead use for loop or for of loop as well.

More content at plainenglish.io