JavaScript provides a multitude of ways for implementing loops to traverse through an array. Today we are going to discuss one particular loop that has quickly turned into a favourite amongst developers; the forEach loop in JavaScript. Below are the topics that we will be looking into:
- What are Loops and Arrays?
- forEach in JavaScript Syntax
- Parameters of forEach in JavaScript
- Return Value of forEach in JavaScript
What are Loops and Arrays?
Loop is the term for the process of implementing an iterator i.e. something that is repetitively done. So if you were to count from 1 to 10, you would implement a loop that loops ten times, and increases a counting value by 1.
Arrays are simply put, a collection of similar objects. It’s generally great for maintaining a list of things, for example, student information, which could be stored as a student object in an array. A great way to traverse an array has been a for loop, and that is exactly what the forEach loop improves upon. Let’s learn more about the forEach loop.
forEach in JavaScript Syntax
student_names = [ 'Rob', 'Van', 'Dam']
studentNames.forEach((student) => {
//You can perform your desired function out here
print(student)
}
The above snip is the syntax of a forEach loop in JavaScript. Let’s take a closer look at how this is all executed. We firstly declare an array of student names and name it appropriately so. Then we invoke the forEach function with the dot(.) operator. The data that is returned by the function is stored in student. The data is returned by a callback function. In this example, we simply print the names of the student which would give the output ‘Rob Van Dam’
Parameters of forEach in JavaScript
The parameters are passed in the callback function, they are-
- currentValue — The current values being passed in the callback. In the snip the currentValue is student. This parameter is mandatory.
- index — The index of the current element in the array. This is an optional parameter.
- this — this refers to the current object in the call stack.
Return Value of forEach in JavaScript
undefined. Always.
Filter, Map return an array, and forEach returns undefined. This is the main difference between these loops.
Now that the basics are done, let’s go over a few rules to be kept in mind when using forEach.
- forEach executes the callback function once for each array element.
- It always returns undefined.
- It does not mutate the array, but the callback can if programmed to do so.
- forEach is not chain-able like map, reduce or filter.
- The range of elements processed by forEach loop is set before the first invocation of the callback function.
- Elements appended to the array after forEach started are not visited by the loop.
- Elements that are deleted before being visited by the loop are not visited.
- If elements that are already visited are removed from the array during the iteration, later elements will be skipped.
- forEach loop once started cannot be stopped without killing the process thread. Think of it as a subscription. You have to unsubscribe to it for it to stop.
- forEach does not execute the callback for the array elements without values.
These are the rules that are always to be kept in mind when using the forEach loop.
Now that you know about the forEach loop, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Got a question for us? Please mention it in the comments section of “forEach in JavaScript” and we will get back to you.