{"id":9859,"date":"2020-06-24T21:23:14","date_gmt":"2020-06-25T04:23:14","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=9859"},"modified":"2023-12-01T03:23:23","modified_gmt":"2023-12-01T11:23:23","slug":"javascript-foreach-loop","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-foreach-loop\/","title":{"rendered":"JavaScript forEach Loops Made Easy"},"content":{"rendered":"\n

The JavaScript forEach<\/code> loop is an Array method that executes a custom callback function on each item in an array. The forEach<\/code> loop can only be used on Arrays, Sets, and Maps.<\/em><\/p>\n\n\n\n

\n\n\n\n

If you\u2019ve spent any time around a programming language, you should have seen a \u201cfor loop.\u201d Using a for loop, you can run through a set of data or a function for a certain number of times. For example, you could have a list of names, also known as an array, and a for loop will go through 100 of those names.<\/p>\n\n\n\n

There is a more efficient way to write a for loop if you are working with a collection, like a list or a set. That\u2019s where JavaScript forEach<\/em> loops come in. A forEach loop will run a JavaScript callback function<\/a> for each item in a list. Then, the loop stops.<\/p>\n\n\n\n

JavaScript for Loop Refresher<\/strong><\/h2>\n\n\n
\n
\"javascript<\/figure>\n<\/div>\n\n\n

The JavaScript for loop<\/a> executes a function a predefined number of times. For loops are useful if you need to run the same block of code multiple times. Using a for loop instead of copying your code helps reduce redundancy. This improves the readability of a code base.<\/p>\n\n\n\n

Let’s write a for loop that prints a value to the console ten times:<\/p>\n\n\n\n

for (i = 0; i <10; i++) {\n\tconsole.log(\u201ctest\u201d)\n}<\/pre><\/div>\n\n\n\n
This loop will execute the console.log(\u201ctest\u201d)<\/code> line of code ten times, once for each time the loop is executed.<\/p>\n\n\n\n
How does this work? The for loop is split up into three components.<\/p>\n\n\n\n
The first component is i = 0.<\/em> This is where we define a JavaScript variable<\/a> that keeps track of how many times our loop has been run.<\/p>\n\n\n\n
Next, the i < 10<\/em> code defines how many times the loop should be run (in this case, 10). The i++ component executes after each iteration. This component adds one to the “i” variable counter.<\/p>\n\n\n\n
The JavaScript forEach<\/code> Loop<\/strong><\/h2>\n\n\n\n
forEach is a JavaScript Array<\/a> method. It is used to execute a function on each item in an array. Lists, sets, and all other list-like objects support the forEach method.<\/p>\n\n\n\n
We’re going to write a loop that displays a list of companies to the console. Instead of using a for loop, we’re going to use a forEach loop. This is because we are working with a list of companies.<\/p>\n\n\n\n
The following code prints each value from a list of companies to the console:<\/p>\n\n\n\n
const companies = [\"Apple\", \"Google\", \"Facebook\"];\ncompanies.forEach(company => {\n\tconsole.log(company);\n});<\/pre><\/div>\n\n\n\n
Our output for our code is as follows:<\/p>\n\n\n\n
Apple\nGoogle\nFacebook<\/pre><\/div>\n\n\n\n
For each item in our “companies” list, we print out the item to the console. This is different to how a regular for loop works.<\/p>\n\n\n\n
JavaScript forEach vs for Loop<\/h3>\n\n\n\n
In a traditional for loop, you would have to access each item in the “companies” list by list indexing<\/a>. A forEach loop gives you direct access to each item in an array.<\/p>\n\n\n\n
Indexing is where you specify the index number of the value you want to access in a list. This index number can be retrieved from the counter that a for loop contains. We discussed this counter earlier.<\/p>\n\n\n\n
With a forEach loop, we can access each item in our list individually. In our last example, we created the variable “company”. This variable represented an individual company over which our forEach loop was iterating.<\/p>\n\n\n\n
forEach loops accept a callback function whereas for loops do not. In a for loop, all of your code is enclosed in the main body of the loop. In a forEach loop, you must write a function which will be executed for each item in the list over which you are iterating.<\/p>\n\n\n\n