Loops

Go back to JavaScript Index

What is a loop?

A loop is a programming tool that is used to repeat instructions a certain number of times as long as a set condition is true.

There are two types of loops in JavaScript: for loops and while loops.

The for loop

For loop syntax

for (initial expression; condition; increment expression) {
// Code block
}
1.0 | For loop syntax

The initial expression runs once.

The condition is something that needs to return true for the code block to run

The increment expression runs everytime the code block runs.

Example

Count to 5

let num;
let text = "";

for (num = 1; num <= 5; num++) {
text += num + " ";
console.log(text);
}
1.1 | For loop example

In the example above we start at 1 (num= = 1). As long as the value of num is less than or equal to 5 (num <= 5), the code block will run and each time it does, the value of num is incremented (num++). This means that the first time the code block runs the condition returns true, because 1 is less than or equal to 5, and when it has, the value of num (1) is incremented by 1, meaning that the new value of num is 1+1 = 2. The code block will check the condition once more and repeat, until the incrementation results in the value of num being greater than 5.

Eksample: a for loop and an array

let i;
let shoppingList = ["milk", "carrots", "bananas"];
for (i = 0; i < shoppingList.length; i++) {
console.log(shoppingList[i]);
}
1.2 | A for loop and an array

In the example above, we start at 0 (the first index number in an array). As long as the index number (i) is less than the length of the shoppingList array (i < shoppingList.length) the code block will run, which means that the array value with that index number will be printed to the console. Then 1 is added to the value of i.

Be aware that this code will not display any array elements that are added afterwards.

NB: the letter i is often used when referering to an index number.

Examples of use

For loops are often used for things like:

  • Accordions / Collapsibles
  • Search fields / Filtering
  • Listing array elements

The while loop

While loop syntax

while (expression) {
// Kodeblok
}
1.3 | While loop syntax

The code block will repeat as long as the expression is true (Carefull!, as you might end up creating an infinit loop that will make the browser crash.)

While loop eksempel

let count = 0;

while (count < 5) {
console.log("Count: " + count + "<br>" );
count++; // This line is important!
}
1.4 | While loop example

Notice the last line in the code block (count++). This line is extremely important as it prevents the loop turning into an infinit loop that might end up chashing your browser.

Assignment 1

You can log each element in an array with a while loop as was done with a for loop in the example 1.2 above. But how?

  • Create a while loop that logs the elements of the shoppingList array to the console. Be carefull not to create an infinit loop.

Assignment 2

Look at the shoppingList wireframe on Canvas. Would you need to use a loop anywhere to program it? And if so - what would it do?