Learn About Javascript Loops Without Jumping Through Hoops
Introduction
Javascript is a very useful language possibly the most useful. It is used in 95.2% of all websites on the internet. That being said it’s a little bit like the wild west still, you can code the solution to a problem in so many ways! It can be hard to understand certain aspects of it. The aspect I will be covering today is looping and the many ways you can loop and should loop. We’ll cover “for”, “for/in”, “for/of”, “while” and “do/while” loops.
What is a loop?
A loop is used to iterate through a block of code, which means it repeatedly runs through the code over and over. It makes it faster for when you want to run the same code with a different value each time.
The For Loop
The “for loop” loops through a block of code a number of times. It has three statements in its syntax. Statement 1 is the initializing expression it was initializes the loop counters the “0” is usually the index based number most of the time, you’ll see what I mean when I get to the example. Statement 2 is the condition expression. It’s usually set to a value and as long as that value is true the code will continue to run, but when that value returns false the code stops running, which is what you want because you don’t want to be stuck in an infinite loop (it sucks a lot). Statement 3 is the the increment expression and every time the second statement returns true the increment expression runs as well either incrementing or decrementing. Now that we have seen the three different statements of a “for loop” let’s look at an example.
for (statement 1; statement 2; statement 3) {
// code block to be executed
}//Above is the syntax of a for loop
for (let i = 0; i < 6; i++) {
text += "The number is " + i + "<br>";
}//Above is a for loop in action
Statement 1 is “let i = 0;” that is telling the computer where to start in the array at 0. Statement 2 the condition is “ i < 6;” which is saying “as long as the number is less than 6 keep incrementing up.”. Statement 3 is “i++” which means that you want to increment up each time the block of code runs meaning each time the code runs “i” will go up from its initial value. So what would end up being displayed on your page is:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5I actually had to use a for in my project recently here take a look:
Here I’m going through all of my student array an if any of my students id equals the id of the students I’m trying to delete then remove them form the array. The “for loop” is very useful!
The For/In Loop
The “for/in loop” iterates a specified variable over the enumerable properties of an object. You only want to use this on objects, NOT ON AN ARRAY OF OBJECTS!!! If you try to use this loop on an array of objects you will get an error saying that it’s not iterable. So pay attention to syntax because it will throw you off! Now let’s look at the syntax and an example:
for (key in object) {
// code block to be executed
}
//Above is the syntax for a "for/in loop"
//Example belowconst person = {fname:"Cool", lname:"Guy", age:23};
let text = "";
for (let x in person) {
text += person[x];
}//What the example returns below
Cool Guy 23
The “for/in loop” iterates over the person object and with each iteration it return the key value (x) which represents (“fname”, “lname”, “age”). To gain access to the values of those keys we pass “person[x]” which gives the values (“Cool”, “Guy”, “23”).
The For/Of Loop
The “for/of loop” loops through the values of an iterable object. The syntax has a “variable” and an “iterable”. After every iteration a value of a different property is assigned to the variable. The iterable is just an object who’s properties and be iterated. I know this sounds like a whole bunch of mumbo jumbo but the example should make it clear as day. It the example we’re going to show you the syntax then iterate over an array of objects.
for (variable of iterable) {
//code to be executed
}
//Above is the syntax of the "for/of loop"//Below is the example of the "for/of loop"let users = [
{
id:1,
name:"Him"
},
{
id:2,
name:"Her"
},
{
id:3,
name:"Them"
}
]for(let u of users){
console.log(u.id, u.name)
}//Below is the result of the loop//first iteration: 1,"Him"
//second iteration: 2, "Her"
//Third iteration: 3, "Them"
The “for/of loop” is probably my favorite of all the loops because it’s the one I use the most, I mean it has so many benefits. It’s concise, it accepts all kinds of iterables and allows you to destructure them!
The While and Do/While Loops
While and do/while loops continue to execute a block of code as long as a certain condition is meet as soon as that condition returns false the code stops running, but there is a difference between the two and how they are ran. We’ll look at some examples of both and explain the small difference between them.
do {
// code block to be executed
}
while (condition);//Above is the "do/while loop" syntax
//Below is an example of the "do/while loop"do {
text += "The number is " + i;
i++;
}
while (i < 8);//This returns
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
In the “do/while loop” the code block will always at least run once since even if the condition is false because it is ran before the condition is tested. Now let’s look at a “while loop” now.
while (condition) {
// code block to be executed
}//Above is the syntax for the "while loop"//Below is an example of the "while loop"while (i < 6) {
text += "The number is " + i;
i++;
}//This returns
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The “while loop” will run through the block of code ONLY if the condition returns true unlike the “do/while loop” that will run once even if the condition is false at first. Also make sure you increase the variable by incrementing with the “i++” because if not you will get stuck in a loop that never ends and crash you browser.
Conclusion
Hopefully this keeps you from searching the internet too much about loops in javascript, but always refer to documentation which I have linked in this blog because it goes into much more detail over these topics. Thanks for reading!
