Exploring forEach() in JavaScript

In JavaScript, the forEach() method is a powerful tool for iterating over arrays and executing a function for each element. It provides a clean and concise way to perform operations without the need for traditional for loops. Let's dive into how forEach() works and explore some practical examples.

Basics of forEach()

The forEach() method executes a provided function once for each array element, in ascending order. It is especially useful when you want to perform the same action on every item in an array without mutating the array itself. Here's a basic syntax of forEach():

const coding = ["js", "ruby", "java", "python", "cpp"];

coding.forEach(function(val) {
    console.log(val);
});

//output:
js
ruby
java
python
cpp

Arrow Function Syntax to write the above code:

Using ES6 arrow functions, the syntax becomes even more concise:

const coding = ["js", "ruby", "java", "python", "cpp"];

coding.forEach((item) => {
    console.log(item);
});

//outputs:
js
ruby
java
python
cpp

The result remains the same, the only difference is in the syntax.

Passing a Named Function

You can also pass a named function to forEach():

const coding = ["js", "ruby", "java", "python", "cpp"];

function printMe(item) {
    console.log(item);
}

coding.forEach(printMe);

//outputs: 
js
ruby
java
python
cpp

Note: When passing a function reference like printMe, do not invoke it with parentheses (printMe()), as you're passing the function itself, not calling it.

Accessing Index and Array Reference

The forEach() method can also provide access to the index of each element and the array itself:

forEach not only provides the value, but also provides the index and the whole array, look at the code below to understand it properly.

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

js 0 [ 'js', 'ruby', 'java', 'python', 'cpp' ]
ruby 1 [ 'js', 'ruby', 'java', 'python', 'cpp' ]
java 2 [ 'js', 'ruby', 'java', 'python', 'cpp' ]
python 3 [ 'js', 'ruby', 'java', 'python', 'cpp' ]
cpp 4 [ 'js', 'ruby', 'java', 'python', 'cpp' ]

forEach() with Objects

Even though forEach() is designed for arrays, you can iterate over an array of objects and access their properties:

const myCoding = [
    {
        languageName: "javascript",
        languageFilename: "js"
    },
    {
        languageName: "java",
        languageFilename: "java"
    },
    {
        languageName: "python",
        languageFilename: "py"
    }
];

myCoding.forEach((item) => {
    console.log(item.languageName);
});

//outputs:
javascript
java
python

In this example, forEach() iterates over an array of objects (myCoding) and logs each object's languageFilename property.

Conclusion

The forEach() method simplifies iterating through arrays and executing code for each element. It enhances code readability and reduces the complexity of handling array iterations manually with for loops. Whether you're working with simple arrays or arrays of objects, forEach() provides an elegant solution for performing operations on each element.

Explore forEach() further in your JavaScript projects to harness its flexibility and efficiency. It's a versatile method that enhances your coding experience and makes array manipulation a breeze.