Lets get Loopy with Javascript

Imagine a world where we had to manual go through every element in an Array. A world where were we have to write ten functions just get a count down from 10 to zero. My fingers and brain are already hurting from just thinking about it. Loops are one of the things we take for granted. In this article I am going to go over the different types of loops in JavaScript.

What is a Loop?

A loop in JavaScript is just a way for us repeat a task a set number of times. We can have loops to iterate through a data structure or have a loop repeat for eternity. There are two main types of loops: for loop and while loop. A for loop will repeat until a condition turns false. A while loop will repeat while a condition stays true. Depending on the condition you pass into the loop, you can get a for loop and a while loop to do the same things. Doing this is not best practice but technically it is possible. Generally, when we want to iterate through a collection or do something that involves a counter we will use a for loop. If we want logic to run till a certain condition changes or if we want an infinite loop we will use a while loop.

For Statement

This is the traditional way for declaring a for loop. The for statement takes in 3 different parameters.

1. initial expression

   • This is where we establish the counter that we will manipulate
   • example: let i = 0

2. condition expression

   • This is our condition that will determine if the loop continues or not.
   • If condition is true loop continues
   • if condition is false loop stops

3. increment expression

   • this is the logic that will change our initial expression
   • After every successful loop this will run and change our counter variable
   • if the condition is false and the logic inside our loop never runs this will not run either

for(initial; condition; increment){
//some logic
}

When creating a for loop, we first start with our counter. Normally this starts at 0 or 1 but it can be whatever you like. Then we establish our conditional statement. Generally this is setup to check our initial counter to some value. This is what will determine if the loop will continue or not. IMPORTANT: make sure that your conditional statement will eventually be false. If it never turns false you will have an infinite loop and cause your program to crash. Lastly, we establish how we want our counter to change. This is normally increase or decrease by one ++ or -- but it can be anything you like.

//counts down from 10 to 0.
for(let i = 10; i > 0; i--){
console.log(i)
}

For…Of Statement

For of statements are used to iterate though iterable objects like an Array. This statement will give you the values of each element in the Array. These are great when you want to preform logic on multiple elements in an array. The syntax for the for of loop is much simpler than before. This statement takes in 2 parameters and will keep repeating till it reaches the end of the object you passed in.

1. name of variable
   • this is what you want to name the variable that will represent each element
2. name of iterable object
   • This will be what we iterate through

An easy way to remember this syntax is to read it like normal text. For example:

let numbers = [1,2,3,4]

//for each num of the numbers array do something
for(let num of numbers){
console.log(num);
}

for…in statement

This is used when you want to iterate over the properties of an object. Before with the for…of statement we iterated over the values of an iterable array. We use for… in statement when we want to iterate through the properties of an object. This is very beneficial when you want to access the keys of an object and retrieve or modify their values. The syntax is just like the for … of statement expect it uses the key word in instead of of. I wonder where it got its name?

for(variable in object){
//logic
}

While Statement

This is our second type of main loop. The while loop will keep repeating while the condition is true. Once it returns false the loop will stop. This condition will be checked before the logic inside the statement is executed. This means if the condition in the while statement starts off as false, the logic will never run.When creating a while loop you need to make sure to include logic that will eventually cause your conditional to be false. This is similar to the increment expression from the for loop. Instead of having it as an argument, you put it inside of your logic. If you want to have an infinite loop all you have to do is pass the Boolean value true into the condition. True is always true and will never be false so the loop will never stop.

let i = 10

while(i > -1){
console.log(i)
i -= 1
}

do…while statement

The do while statement is very similar to the while statement, but one key difference. Remember how that if the statement in the while loop starts off as false it will never run. The do while statement works in the reverse way. It will run the logic first and then it will check the conditional to see if it needs to run again. This is great when you need the logic to run at least one time no matter what the conditional returns. To create a do while statement we used the do key word and add our logic and then include the while keyword with the conditional after.

do{
//logic
} while (conditional)

I hope all this talked technical talk didn’t make you go loopy. Loops our a foundational fundamental of JavaScript. The more you know about them the better you will be.