Tips and Tricks on JavaScript for Loop With Examples

JavaScript for loop helps developers avoid repetitive code. There are two categories of JavaScript loops: for loop and while loop. JavaScript loop has three types. It can be a general for loop, a for/in loop and a for/of loop.

The while loop can be of two types: while and do/while loop. If you want to learn more about JavaScript while loop, visit our tutorial JavaScript While Loop.

JavaScript for Loop: Main Tips

• The for loop JavaScript is used to run a piece of code a set amount of times.
• Loops are extremely useful when used with arrays or when you want the same line of code executed multiple times without writing a lot of repetitive code.
• Most common loop types are for, for/in, while, and do/while.

Loop Syntax

The JS for is one of the most commonly used loops. It goes through the specified code an indicated amount of times according to the condition you set for it. The loop increments the specified variable each time as described in the original statement. for in JavaScript syntax example:

for (i = 0; i < 10; i++) {
    t += i + "<br>";
}

The loop's syntax includes three statements, which describe how it will work:

• The first one is executed before beginning the loop. In this case, it declares a variable before starting the loop (i.e. i = 0).
• The second one declares the condition for how many iterations the loop must run (i.e. i < 5 means the loop will stop if i reaches 5).
• The third one is used every time the block of code has been run. In this case, it declares whether the value must increase or decrease with each time it runs, i.e. i++ means i will increase by one each time the loop runs.

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

Note: not all of the statements need to be included in the declaration of the loop, but in such cases, you need to replace the function with the code you will loop through.

We'll now discuss all the parameters in more detail, so you get a better idea. Code examples will be provided to help you grasp the material quicker.

Statement 1

This statement is used to declare the variable you're going to use for iteration. It is possible to declare multiple variables with this statement, but remember to separate the variable declarations with commas:

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

You can also skip this statement if you don't need it for your loop. In that case, you need to declare the variable before the loop:

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

Note: Even when you don't write the statement, you must include the semicolon (;) in order to differentiate what refers to the first, second and the third statements.

Statement 2

This statement is also optional and is normally used to declare under what condition the loop can run. If this statement's condition is true, the loop will run again and check with each new iteration before starting again.

If you decide not to include the second statement in your loop, you need to provide a break statement inside the loop to tell it when to stop running. In the example below, we use break with an if statement to provide a condition when we want the loop to stop:

let i = 0;
var cars = ["Ferrari", "BMW", "Opel", "Mercedes"];
var len = cars.length;
var text = "";

for (; ; i++) {
  if (i >= len) {
    break;
  }
  text += cars[i] + "<br>";
}

Note: You must use the break statement, otherwise, the loop will become infinite: by never ending, it will crash your browser.

Statement 3

This statement is also optional and is used to increment the variable's value. The value may increment positively i++ or negatively i--. You can also set the values to increment greater values than 1, i.e. i = i + 10:

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

Note: even though all of the three statements in a loop can be omitted, it's not a common practice. Use this option only when it's needed in your code.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

For/in Loop

The JavaScript for/in loop is used for looping through properties of an object:

var person = {
   name: "Ben", 
   surname: "Bundy",
   age: 31,
};
var text = "";
var x;
for (x in person) {
   text += person[x];
}

For/of Loop

The JavaScript for/of loop is used to iterate through iterable objects, like arrays and typed arrays, strings, node lists, arguments, maps, and sets. In the example below we use for/of loop to loop through an array and display each item in it:

var cars = ["Ferrari", "BMW", "Opel", "Mercedes"];
var text = "";
for (let car of cars) {
  text += car + "<br>";
}

document.getElementById("test").innerHTML = text;

In the example below, we use JavaScript for/of loop to iterate through a string and display each index (letter):

var cars = ["Ferrari", "BMW", "Opel", "Mercedes"];
var text = "";
for (let car of cars) {
  text += car + "<br>";
}

document.getElementById("test").innerHTML = text;

JavaScript For Loop: Summary

• There are three types of for loops: the regular for loop, the for/in loop and for/of loop.
• The for loop iterates through an array.
• The for/in loop iterates through the properties of an object.
• The for/of loop iterates through iterable objects, like arrays and strings.