Loops are useful when you have to execute the same lines of code over and over until a certain condition become true. The idea of looping is to make repetitive tasks in programming easy and effortless. But it can be a little confusing.
There are different types of loops in JavaScript:
while — loops through a block of code as long as the condition specified evaluates to true.
do…while — loops through a block of code once; then the condition is evaluated. If the condition is true, the statement is repeated as long as the specified condition is true.
for — loop repeats through a block of code until the counter reaches a specified condition is true.
for…in — loops through the properties of an object.
for…of — loops over iterable objects such as arrays, strings, etc.
For today, we will take a deeper look into the for loop to understand how it works.
Syntax:
The following occurs when the for loop is executed:
- Statement 1 — initialization (counter) is used to initialize the counter variables, and evaluated once unconditionally before the execution of the body of the loop.
- Statement 2 — condition expression evaluated at the beginning of each iteration. If it evaluates to true, the loop statements execute. If it evaluates to false, the execution of the loop ends.
- Statement 3 — increment expression updates the loop counter with a new value each time the loop runs.
Simple for loop Example:
Output:
In the example above:
for (let time = 0, time < 10, time++){ console.log(‘Inside the loop:’ + time);}
console.log(‘Outside the loop:’ time);
- let time = 0 is the Statement 1 for our syntax. Here, we are declaring a variable as time and initialize time to start at 0.
- time < 10 is the Statement 2 for our syntax which we will be displaying the value of time in the Console window if time is less than 10.
- time++ is the Statement 3 for our syntax. Here, we want to increase the value of time by one each time the loop runs until it satisfy the condition in statement 2, which time is less than 10. 0 < 10: true, 1 < 10: true, 2 < 10:true, 3 < 10: true, 4 < 10: true, 5 < 10: true, 6 < 10: true, 7 < 10: true, 8 < 10: true, 9 < 10: true, 10 < 10: false, loop is terminated. That is why we see that 1 through 9 is inside the loop and 10 is outside of the loop.
Looping through an Array Example:
Output:
Above, we have an array of some elements [“Apple”, “Banana”, “Mango”, “Orange”, “Papaya”] and we want to loop through all the elements in the array. For array, the first position is 0 (index of 0) not 1. 0 = Apple, 1 = Banana, 2 = Mango, 3 = Orange, 4 = Papaya. When we talk about the length of an array in JavaScript, we are looking for the number of elements in that array. This example have 5 elements.
- let i = 0 is our Statement 1. Here, we are declaring the variable i and initialize i to start at index 0.
- i < fruits.length is our Statement 2. We want to display the value of i in the Console window if i is less than the length of the array of fruits.
- i++ is our Statement 3. Here, we want to increase the value of i by one each time the loop runs until it satisfy the conditional in statement 2, which i is less than the array of fruits. That is why when you look at the output above, you see that the loop after “Inside the loop: Papaya”.
As a beginner to programming, I think many find it hard to understand loops and how it works. Therefore, I decided to write about loop to help myself and others like me to have a better understanding of loops. When I was first introduced to loops, I find it is confusing and hard to understand. Especially, when there are so many different types in JavaScript. But gradually, through practicing I was able to have a better understanding of looping.
I do hope the information in this blog is helpful. Below I have included links for the individual that would like to read more about loops.
