Loops
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
}