6.5 JS For Loops

The For Loop

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

• Statement 1 is executed (one time) before the execution of the code block.
• Statement 2 defines the condition for executing the code block.
• Statement 3 is executed (every time) after the code block has been executed.

Example 1: JS For Loop part 1

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

• From the example above, you can read:
• Statement 1 sets a variable before the loop starts (var i = 0).
• Statement 2 defines the condition for the loop to run (i must be less than 5).
• Statement 3 increases a value (i++) each time the code block in the loop has been executed.

Statement 1

• Normally you will use statement 1 to initialize the variable used in the loop (i = 0).
• This is not always the case, JavaScript doesn't care. Statement 1 is optional.
• You can initiate many values in statement 1 (separated by comma):

Example 2: JS For Loop part 2

for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

And you can omit statement 1 (like when your values are set before the loop starts):

Example 3: JS For Loop part 3

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Statement 2

• Often statement 2 is used to evaluate the condition of the initial variable.
• This is not always the case, JavaScript doesn't care. Statement 2 is also optional.
• If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial.

Statement 3

• Often statement 3 increments the value of the initial variable.
• This is not always the case, JavaScript doesn't care, and statement 3 is optional.
• Statement 3 can do anything like negative increment (i--), positive increment (i = i + 15), or anything else.
• Statement 3 can also be omitted (like when you increment your values inside the loop):

Example 4: JS For Loop part 4

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

The For/In Loop

The JavaScript for/in statement loops through the properties of an object:

Example 5: JS For In Loop

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
  text += person[x];
}

The For/Of Loop

• The JavaScript for/of statement loops through the values of an iterable objects.
• for/of lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.
• The for/of loop has the following syntax:

for (variable of iterable) {
  // code block to be executed
}

• variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with const, let or var.
• iterable - An object that has iterable properties.

Looping over an Array

Example 6: JS For/Of Loop, Looping over an Array

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
  document.write(x + "<br>");
}

Looping over a String

Example 7: JS For Of Loop, Looping over a String

var txt = "JavaScript";
var x;

for (x of txt) {
  document.write(x + "<br>");
}