Javascript Methods: .forEach

.forEach is a method that makes iteration through an array smooth and simple. Applying this method, once understood, can make code…

.forEach is a method that makes iteration through an array smooth and simple. Applying this method, once understood, can make code readable and efficient. This post will deal with applying the .forEach method specifically to arrays.

.forEach is usually applied much like a For Loop. We apply the method to an array, and each item within the array is return individually. Each item in the array can be manipulated within the method by running a function “for Each”.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.forEach((item) => {
    console.log(item + 1)
}));

// Console: 2, 3, 4, 5, 6, undefined

This snippet showcases the .forEach method looping through the numbers array and adding 1 to each item, then logging this to the console. Note the undefined at the end of the console log, this is present as the forEach method always returns ‘undefined’. Items and their manipulations can be logged to the console but original items from the array will never be manipulated or returned from the method. This can be exemplified by the following snippet.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.forEach((item) => {
    return item + 1;
}));

// Console: undefined

This does not mean the .forEach method is without it’s uses. The .forEach method can become incredibly powerful as a way to manipulate other elements such as strings or arrays.

const numbers = [1, 2, 3, 4, 5];
let sum = 0

numbers.forEach((item) => {
    sum += item
}));

console.log(sum)

//console: 15

const numbers = [1, 2, 3, 4, 5];
let output = [];

numbers.forEach((item) => {
    output.push(item + 1)
});

console.log(output)

// console: [ 2, 3, 4, 5, 6 ]

Finally, we can also access the items index number within the array. This opens up even further opportunities this method. The index is identifed as the second value parsed to the function applied to the forEach item function.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.forEach((item, index) => {
    console.log(item, index)
})));

// console:
// 1, 2 ,3 , 4, 5
// 0, 1, 2, 3, 4

By accessing the index of the item, we can choose which items we manipulate within the .forEach method. The following snippets exemplifies this by only adding 1 to items if they are at an even index.

const numbers = [1, 2, 3, 4, 5];
output = []

(numbers.forEach((item, index) => {
    console.log(item + 1, index)
    if (index % 2 === 0) {
        output.push(item + 1)
    } else {
        output.push(item)
    }
}));

console.log(output)

// console: [ 2, 2, 4, 4, 6 ]

Thanks for reading through this, I hope using this method can be of use to you on your programming journey. Next time we will build on this by looking at the .map method, which takes the possibilites of forEach even further, hence it’s popular frequent utilisation in modern frameworks such as react.

My previous post about the ever useful .split() method is also worth checking out as these methods are frequently used together.

.split() it up!
The javascipt .split() method is something I have implemented over and over in my relatively short programming journey…medium.com

You might also want to check out my post about CSS hover and transitions for a quick technique that can be applied to give your front end design a little bit of oomph!

Please follow me on medium and Twitter for updates and new stories every week.

https://twitter.com/jrsCoding

JRS CODING
twitter.com