Lets get Loopy with Javascript
Tags: javascript, beginners
Published: 2021-09-27 01:59:24

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

```javascript
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. 

```javascript
//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: 
```javascript
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?

```javascript
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.

```javascript

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.

```javascript 
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.