Table of Contents
Loops are an important part of programming languages. They give you the ability to execute the same code block over and over which keeps your code smaller and more readable.
If you find yourself copy and pasting the same code for the purpose of executing them multiple times, there's a chance loops might be useful for you.
In this lesson, we'll take a look at the different kinds of loops in JavaScript and also loop control for flow.
For Loop
A for loop is a loop that contains three major parts.
- Initial Value: This is the value assigned to the variable that will keep track of the progression in the loop, usually called
i
. - Condition: This is the conditional that will get re-evaluated to check if the code inside the loop should run again.
- Iteration: This is how you advance in progress every time you complete one loop.
A common way to demonstrate for loops is counting from 1 to 10.
JAVASCRIPTfor (let i = 1; i <= 10; i++) {
console.log(i);
}
HTML1
2
3
4
5
6
7
8
9
10
Let's break down what's going on here.
First, we create a variable called i
and initialize its value to be 1
.
JAVASCRIPTlet i = 1;
Second, we say "hey, as long as the variable i
is less than or equal to 10, you're good to loop again".
JAVASCRIPTi <= 10
Finally, after the code inside the loop executes, we want to increment the value of i
.
JAVASCRIPTi++
Put this all together, and what we're saying is this:
"Start i
at 1, log it to our console, increment the value of i
by 1, then check that we're still equal to or less than 10, if so, repeat. Once the value of i
reaches 11
, we can stop looping since 11
is greater than 10
."
While Loop
A while loop is a kind of loop that takes a single condition and evaluates it. If it evaluates to true, it will run again, otherwise if it evaluates to false it stops running.
Let's look at the same situation we tackled above but using a while loop instead.
JAVASCRIPTlet i = 1;
while (i <= 10) {
console.log(i);
i++;
}
HTML1
2
3
4
5
6
7
8
9
10
While the output is exactly the same, we accomplished it with a while loop and not a for loop, but let's break this down as well.
First, we create a variable called i
and initialize its value to 1
.
JAVASCRIPTlet i = 1;
Second, we say "while i
is still less than or equal to 10
, loop once more".
JAVASCRIPTwhile (i <= 10) {
Finally, the code inside the loop simply logs the variable i
then increments its value.
JAVASCRIPTconsole.log(i);
i++;
Eventually, the value of i
will exceed 10
, causing the loop to terminate.
Do While Loop
A do while loop is very similar to a normal while loop except that the block of code being looped over is guaranteed to run at least once.
This is because it first does the code inside the loop, then checks the condition to determine if it needs to loop again or not.
Consider the situation where you're really hungry and so you bought a family-sized bag of Doritos. They come with 100 chips and since you're starving, each time you go to grab some, you pull out 20 at a time.
Here's how you would demonstrate this using a do while loop.
JAVASCRIPTlet doritos = 100;
do {
console.log("With " + doritos + " Doritos left, I can eat.");
doritos -= 20;
} while (doritos > 0);
console.log("My Doritos are gone now. I am sad. :(");
HTMLWith 100 doritos left, I can eat.
With 80 doritos left, I can eat.
With 60 doritos left, I can eat.
With 40 doritos left, I can eat.
With 20 doritos left, I can eat.
My Doritos are gone now. I am sad. :(
First, we create a variable to hold how many Doritos are in the bag, and initialize it to 100 chips.
JAVASCRIPTlet doritos = 100;
Second, since we just opened the bag, we know there are chips inside and so we immediately eat some. Since we eat 20 chips at a time, so we can subtract it from the total.
JAVASCRIPTdo {
console.log("With " + doritos + " doritos left, I can eat.");
doritos -= 20;
}
Now that we have eaten some for the first time, we can now check if there are Doritos left in the bag, and we do so with this conditional:
JAVASCRIPTwhile (doritos > 0);
While we still have some Doritos in the bag, we are free to go in for more. Eventually, we will run out of Doritos, and that conditional will evaluate to false.
Once that happens, we no longer loop again because we ran out of Doritos to eat.
For In Loop
A for in loop iterates through the properties of an object and the positions in an array.
Here is iterating through a small array, printing out all the values inside it.
JAVASCRIPTlet colors = ["red", "white", "blue"];
for (let i in colors) {
console.log(colors[i]);
}
HTMLred
white
blue
All the values inside the colors
array were printed, one on each line.
Now, here is a for in loop iterating over the properties of an object:
JAVASCRIPTlet person = {
name: "Tom",
weight: "150",
age: 40
};
for (let property in person) {
console.log("This person's " + property + " is " + person[property] + ".");
}
HTMLThis person's name is Tom.
This person's weight is 150.
This person's age is 40.
Like with before, the for in loop iterated over what is inside the person
object. Each property was printed out on a separate line along with the value. This is a very common way to iterate over objects.
Break
While you are inside of a loop of any kind, JavaScript allows you to terminate the loop whenever you want via the break
statement.
Let's try it by counting to 10 like before, but breaking after we output 5.
JAVASCRIPTfor (let i = 1; i <= 10; i++) {
console.log(i);
if (i == 5) {
break;
}
}
HTML1
2
3
4
5
This for loop would have printed out every number from 1 to 10, but we told it to break out of the loop if i
were equal to 5
.
Once that was the case, the loop terminated, and we were left with just the numbers from 1 to 5.
Continue
With the continue
statement, you can tell the browser to continue on to the next loop, without finishing the rest of the code block.
Let's say while printing the numbers from 1 to 10, you didn't want the numbers 3 and 7 to appear.
JAVASCRIPTfor (let i = 1; i <= 10; i++) {
if (i == 3 || i == 7) {
continue;
}
console.log(i);
}
HTML1
2
4
5
6
8
9
10
This time, before outputting anything, we first check if i
is equal to either 3 or 7. If so, we continue to the next iteration, otherwise, we print out the value of i
.
Resources
- Getting Started with Svelte
- Create an RSS Reader in Node
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- Learn how to build a Slack Bot using Node.js
- Creating a Twitter bot with Node.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue