Javascript Loop For

JavaScript for loop statement to create a loop with various options. This loop statement allows us to create a loop with three optional expressions.

Syntax:-
for (initialization; condition; post-expression) {
    // statements
}  

Initialization step

This initialization step initializes the loop. The initialization expression is executed only once when the loop starts. We typically use the initialization is to initialize a counter variable.

If we use the var keyword to declare the counter variable, the variable will have either function or global scope. In other words, we can reference the counter variable after the loop ends.

However, if we use the let keyword to declare the counter variable, the variable will have a blocked scope, which is only accessible inside the loop.


Condition step

This conditional step is an expression that is evaluated once before every iteration. The statement inside the loop is executed only when the condition evaluates to true.

The loop is terminated if the condition evaluates to false. Note that the condition is optional. If we omit it, the for loop statement considers it as true.


Post-expression step

This for loop statement also evaluates the post-expression after each loop iteration. Generally, we use the post-expression to update the counter variable.

Input:-
 <script>  
	   for (var i=1; i<=5; i++)  
    {  
        document.write(i + "<br/>")  
    } 
</script>

Output:-


Javascript Loop For In

JavaScript for in loop statement to create a loop with various options. This loop statement allows us to create a loop through the properties of an object.

Syntax:-
for (key in object) {
    // statements
}  

Following is the example to illustrate this loop:-

Output:-


For each() loop

This method to execute a function on every element in an array.

Typically, when we want to execute a function on every element of an array, we use a for loop statement.

Input:-
 <script>  
	   var students = ["John", "Mary", "Rock"];
    students.forEach(function (e) {
       document.write(e + "<br/>");
    });
</script>

Output:-

The following illustrates the syntax of the forEach() method.

Array.forEach(callback [, thisArg]);

The forEach() method takes two arguments:-

  1. Callback:-

The callback function that the forEach() method uses to execute on every element. This function accepts the following arguments:-

  • currentElement: is the current array element being processed.
  • index: the index of the currentElement in the array.
  • array: the array that calls the forEach() method.

The index and array are optional.

  • thisArg:-

The thisArg is a value to use as this when executing the callback.

One limitation of this method in comparison with the for loop is that you cannot use the break or continue statement to control the loop.

To terminate the loop in the forEach() method, you must throw an exception inside the callback function.

Note:- forEach() function returns undefined therefore it is not chainable like other iterative methods: filter(), map(), some(), every(), and sort()


Javascript Loop For Of

This looping method loops through the values of an iterable object. We can loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more.

Syntax:-
 <script>  
	   for (variable of iterable) {
       // code block to be executed
    }
</script>

Above syntax has two arguments:- variable and iterable.

Variable can be declared as let, const or var. And For every iteration the value of the next property is assigned to the variable. Iterable signifies an object that has iterable properities.

Input:-
 <script>  
	   let days = ["Monday", "Wednesday", "Friday"];
    let message = "";
    for(let x of days){
        message += x + "<br/>";
    }
    document.write(message);
</script>

Output:-