An overview of `for` loops in JavaScript

An overview of `for` loops in JavaScript

A fundamental principle of computer programming is the long-held adage of “DRY”, or “Don’t Repeat Yourself”. Anytime you find yourself re-writing the same code over and over again, chances are there is a better way to re-factor, without the need for duplicate lines of the same code. One of the best ways of accomplishing this is via loops. There are several different kinds of loops, all of which exist in various forms across all programming languages. In this post, we’ll take a look at one of the most common and useful forms of loops, the for loop.

A basic example

As an introduction to show where loops are very useful, let’s say you wanted to print, “Hello World” to the JavaScript console. Without the use of a loop, you would have to write something along the following:

console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");
console.log("Hello World");

 

This is extremely tedious and inefficient. The above 10 lines of code can drastically be simplified with just the following 3 lines:

for (var i = 0; i < 10; i++) {
  console.log("Hello World");
}

 

The above example is what’s known as a for loop, one of the most common and useful forms of loops.

The for loop

There are several components that go into writing a for loop: the counter or initial expression, the condition, increment expression, and the code to excecute within the loop. We’ll break down our example above of creating a loop that prints “Hello World” to the console 10 times.

All for loops start with the keyword for, followed by a set of parentheses, then followed by brackets. The code to execute is placed inside the brackets. The skeleton structure of a for loop can be seen as:

for (counter; condition; increment) {
  // Code to execute goes here
}

 

The counter must be set as a variable; in programming this is frequently set as i, although it could be x, n or any variable name allowed by the language. This tells the loop its starting value, in this case, 0.

The next part of the loop tells JavaScript the condition: in this case, execute the loop as long as the value of i is less than 10. As soon as the loop reaches 10 it will stop. It’s extremely important to have a conditional set before trying to run your loop, otherwise you’ll end up with an infinite loop, which will end up overloading and crashing your browser.

The last part of the loop in parentheses is the increment: i++. i++ is shorthand in JavaScript for i += 1 or i = i + 1. In other words, it adds 1 to the value of i each time the loop is run. This is also a crucial component of the loop, as if it doesn’t actually increment it will also not terminate.

Whichever code is placed inside the brackets will run through each iteration of the loop. If you would like to get some sort of indication of what iteration the loop is on each time is run, you can simply add the counter variable to be included in the code that should be returned each time (i.e. the code run inside of the brackets):

for (var i = 1; i <= 10; i++){
  console.log("The loop is now on iteration " + i);
}

 

The above code, when run, will print:

The loop is now on iteration 1
The loop is now on iteration 2
The loop is now on iteration 3
The loop is now on iteration 4
The loop is now on iteration 5
The loop is now on iteration 6
The loop is now on iteration 7
The loop is now on iteration 8
The loop is now on iteration 9
The loop is now on iteration 10

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC