JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript For Loop

Loops are used in programming to automate repetitive tasks.

For example, suppose we want to print “Hello World” 10 times. This can be done as shown below:

In Loop, the statement needs to be written only once and the loop will be executed 10 times as shown below:

Run code

The For Loop

The for loop has the following syntax:

for (initialization; condition; final-expression) {
   // statement(s) to be executed
}

initialization is executed (one time) before the execution of the statement(s).

condition defines the condition for executing the statement(s).

final-expression is executed (every time) after the statement(s) has been executed.

Run code

From the example above, you can read:

  • initialization sets a variable before the loop starts (var i = 0).
  • condition defines the condition for the loop to run (i must be less than 5).
  • final-expression increases a value (i++) each time the code block in the loop has been executed.

In the following example we loop through an array, in ascending order:

Run code

In the following example we loop through an array, in descending order:

Run code

Optional Expressions

All three expressions in the for loop are optional. For example, we can write the same for statement without the initialization expression by initializing the variable outside of the loop.

Run code

In this case, the first ; is necessary to denote whether the statement refers to initialization, condition, or final expression, even when it's omitted.

Below, we can also remove the condition from the loop. We will use an if statement combined with break to tell the loop to stop running once i is greater than 3, which is the reverse of the true condition.

Run code

Note: The break statement must be included if the condition is omitted, otherwise the loop will run forever as an infinite loop and potentially crash the browser.

Lastly, the final expression can be removed by putting it at the end of the loop instead. Both semicolons must still be included, or the loop will not function.

Run code

As we can see from the above examples, including all three statements generally produces the most concise and readable code. However, it's useful to know that statements can be omitted in case you encounter it in the future.


Nested loops

You can nest loops i.e. a loop inside another loop.

Nested loops are used in most of the places it is used in Matrix multiplication, displaying tables and many other places:

Run code

The For...In Loop

The for...in loop iterates over the properties of an object.

To demonstrate, we will make a simple myObj object with a few name:value pairs.

Run code

In each iteration, one property from object is assigned to x and this loop continues till all the properties of the object are exhausted.

The following example implements a for...in loop and prints the web browser’s Navigator object:

Run code

The For...Of Loop

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects and user-defined iterables.

Run code

In each iteration, one element from object is assigned to x and this loop continues till all the elements of the object are exhausted.

Both for...in and for...of loops iterate over something. The main difference between them is in what they iterate over:

  • The for...in loop iterates over the enumerable properties of an object, in an arbitrary order
  • The for...of loop iterates over data that the iterable object defines to be iterated over

The While Loop

The while loop and the do...while loop will be explained in the next chapter.