Web Development
Learn JavaScript
Loops

Loops

💡
This page is under Construction

Loops are a way to do something, that is, to execute a certain command or block of code, repeatedly, or over a set number of times. Looping over items is called iteration.

To iterate means is to perform something again and again.

The way loops work is that they iterate over your code block until a certain condition is met, after which they stop, or until they encounter the break statement - just like in a switch

The for loop

The for loop repeats until your condition evaluates to false, after which is breaks out of the loop. It has the syntax:

for (initialization; condition; afterthought) {
  // Some code block
}

Note that we use semicolons and not commas!

For Example:

for (let age = 10; age < 8; age++) {
  console.log("This is a minor");
}

The above code block will be executed in the following way:

Initialization

First, a variables with the name age will be initialized to a value of 10. This initialization can also be defined outside of the for loop in the following way:

let age = 10;
for (age; age < 8; age++) {
  console.logo("This is a minor");
}

Check the condition

Next, JavaScript will move to check whether the condition you have passed in evaluates to either true or false. If it evaluates to true then the loop will continue to the next phase which is the afterthought where something like an increment or decrement to your conditional value happens. However, if it evaluates to false, then JavaScript will break out of the loop and stop its execution.

In the example above, our condition evaluates to true because. Therefore, we move on to the afterthought.

Afterthought

Here, you can do something like increment or decrement your conditinoal value so that at one time, the condition will have to evaluate to false so that you don't end up with an infinite loop.

In our example above, we increment our age value by 1 for every time that the condition is true. This will make the loop run only two times - because we will increment age from 8 to 10 only two times. When this happens, our condition for the age being less than 10 is now no longer being met. Therefore, it breaks out of the loop and it evaluates to false.

The for...in loop

This is used to loop over the properties of an object. It has the syntax:

for (let i in objectname) {
  // Some code block
}

For Example:

// Create an object
const person = {
  name: "Thomas",
  age: 27,
}
 
// Loop over the object properties
for (let i in person) {
  console.log(person[i]); // Will return Thomas and 27 as indivdual object values.
}

It can also be used to loop over an array:

For Example:

const numbers = [45, 4, 9, 16, 25];
 
for (let i in numbers) {
  console.log(numbers[i]); // Will return the individual elements of the numbers array
}

The for...of loop

The for...of loop is used to iterate over iterable objects, such as arrays, strings, Maps and NodeLists or an object that has iterable properties.

For Example:

let languages = ["JavaScript", "Python", "Java"];
 
for (let x of language) {
  console.log(x); // Will log out the individual languages
}

The difference between for...of and for...in

Using the example above, the for...of loop will display the values of the array, but if you use for...in, it will log out the index of the items.

The while loop

The do...while loop

The break statement

The continue statement