For loop vs. forEach vs. for…in vs. for…of

This article will show a quick introduction of a for loop, a forEach, a for of, and a for in. We are going to talk about what are their differences and similarities in this article.

For Loop

This method is the most traditional type of iteration in Javascript. It takes three expressions; a variable declaration and expression to be evaluated before each iteration, and an expression to be evaluated after each iteration. Let's dive into an example.

An example of for loop on the left image and a right image is the outcome execution from the for loop.

We are setting a variable i=0 before the loop starts. It will continue to loop as long as i <arr. length (which is 4), and each iteration of the loop will increment the i by one. Finally, within the brackets, the execution code will be run on each iteration of the loop.

ForEach

This method executes with a callback function( a function passed to another function as an argument ). It can only be used on Arrays, Maps, and Sets.

We can perform the same thing in forEach

When using forEach, there is a call back function where it is executed on each array element. However, it won’t allow statements ‘break’ to exit for loop, ‘continue’ to skip an iteration, or ‘return’ to return a value(and exit the loop).

For…In

Mostly used to iterate over the enumerable properties of objects. Every property in an object will have an Enumerable value- if that value is set to true, then the property is Enumerable.

An example of for…in loop in map. The right image is the result from the for…in loop.

The key property is being displayed. The array displays the relevant indexes, as internally, the array is stored in the form of a key-value pair (keys start from 0).

Arrays are objects too, which means we can also use the for…in loop. As well as string, each string has an index.

For …Of

Mostly used to iterate over iterable objects. Usually utilizing to iterate values in an array of most array-like objects such as maps. Unlike forEach(), you can use “break,” “continue,” and “return.”Two advantages of ‘for-of’ over ‘for-in’ are that. First, it visits indices of an array in numeric(ascending) order. Second, indices of arrays are not converted to strings, so executing arithmetic is much more concise.

The for … in loop indexes are strings type. On the other hand, the for…of indexes are number type.

for…of is also offers a lot of flexibility such as pictures down below

The left image is the input, and the right image is the output.

The left image is the input, and the right image is the output. As you can see, you can iterate through for…of to find the key properties with a map.

The left image is the input, and the right image is the output. As you can see, you can iterate through for…of to find the value of the properties with a map.

And that's it! That is the introduction of for loop, forEach, for…in, and for…of. I hope it helps you to clarify something!