Out of the choices we have for loops in JavaScript, the for loop is the easiest to use and understand, and can said to be the most implemented loop in JavaScript - in fact in many other programming languages also. In this chapter we will go over the basic concepts of the for loop and then consider some simple tasks using it.

Syntax of the for loop

for (/*var declarations*/ ; /*condition*/ ; /*incrementing expression*/) {
    // code to be repeated
    // this enclosed block of code is also known as a LOOP BLOCK
  1. var declarations is the statement declaring and/or initialising variables that, in loops, are usually called iterators, counters.
  2. condition is the expression to be tested and checked for to execute the loop once more.
  3. incrementing expression is the expression incrementing the counter(s).

First for loop code

The syntax may not make sense at the first glance so now let's put it into real action.
for ( var i = 0; i < 5; i++ ) {
    console.log("The var i currently is: " + i); // this code would be repeated
And let's break it down again:
  1. var i = 0
    is declaring (var i) and initialising (i = 0) a variable known as the counter/iterator of the loop
  2. i < 5
    is the conditional expression being tested each time before the loop runs. If it is true only then the loop is iterated. At the start, since the condition is met i.e i is 0 and hence less than 5 therefore the loop executes one time and then moves on again returning to this point of checking the condition for the next iteration.
  3. i++
    is the expression incrementing the counter i. The expression could have also been ++i or even i = i + 2 but not i + 2 because this doesn't set i to something new. In this third statement we have to increment the counter by setting it to a new value using some expression. If not done so the loop might keeep running an infinite number of iterations.
Now write the above code and execute it. The output would look something like this in the console:

The var i currently is: 0
The var i currently is: 1
The var i currently is: 2
The var i currently is: 3
The var i currently is: 4

So why are there these 5 lines? Just because the loop has run 5 times (up to the point till where the condition was met) executing the contained code each time it runs.

And why is the value at the end of each line (0,1,2...) different? This is because we took that value from an incrementing variable in javascript called an iterator - sometimes also known as counter. Each time the loop runs, the counter has a different value, owing to its incrementing expression (i++), and gets printed accordingly in the statement of the loop.

And you are done with your first loop code!

More examples

Example 1

Here we print each letter of a word, line by line, using the charAt() method and a for loop.
var str = "Earth";
for ( var i = 0; i < str.length; i++ ) {
    console.log("Letter " + (i + 1) + ":" + str.charAt(i)); // this code would be repeated
// first loop iteration would be
/*  console.log("Letter " + (0 + 1) + ":" + str.charAt(0))
    console.log("Letter " + 1 + ":" + "E")
Letter 1: E
Letter 2: a
Letter 3: r
Letter 4: t
Letter 5: h

Example 2

Here we output each element of an array using its index.
var arr = ["Good", "Better", "Best"];
for ( var i = 0; i < arr.length; i++ ) {
    console.log(arr[i]); // this code would be repeated
// first loop iteration would be
/*  console.log(arr[0])

In Example 1 and 2 we use str.length and arr.length in the loop condition (after  < ) to iterate through the whole length of the string and array respectively and fetch each character and element.


The for loop is an extremely useful loop considering the quickness with which one can set it after writing the for keyword. You can further polish your understanding on it by thinking of other places where a for loop can be applied and try to write code for those specific places.

Next in this line we have the while loop which is also an extremely useful and powerful loop and usually preferred for real conditions over for as you will see in the coming chapter!

If you feel you didn't understand anything in this chapter consider going through it once more or reading the explanation of loops in programming.