What are JavaScript loops?
Tags: javascript
Published: 2021-01-08 19:56:49

In this article, we will discuss a very important part of javaScript: `loops`, which means doing things repeatedly. Loops allow us to repeat certain chunks of code using some conditions. If we have to print something a certain number of times, sum all the numbers in an array, or list all the keys/values from an object, we can do so by using loops. There are different types of loops:

### for loop:
It loops through a block of code until the counter reaches a specified number.
syntax : 
```javascript
for([initial expression] [condition] [increment expression]) {
//statement 
}

//example of a for loop

for(let i = 1; i <= 10; i++) {
	console.log(“Hello, my name is Uma!”, i)
}
>Hello, my name is Uma! 1
>Hello, my name is Uma! 2
>Hello, my name is Uma! 3
>Hello, my name is Uma! 4
>Hello, my name is Uma! 5
>Hello, my name is Uma! 6
>Hello, my name is Uma! 7
>Hello, my name is Uma! 8
>Hello, my name is Uma! 9
>Hello, my name is Uma! 10

```
Above we set the counter variable `i` to 1, then conditionally check if `i` is less than or equal to 10 and increment `i` each time until the condition is met. As we can see, it printed out the string 10 times, and each time it printed, the counter was incremented by 1. 

One important part to discuss here is the idea of an  `Infinite loop`. This is something we never want to encounter because an infinite loop never ends and will end up crashing your program. Which of course you never want to happen. Have a look at an example below:
```javascript
for(let i = 1; i !==20; i+=2) {
    console.log(i)
}

```
What is wrong with the above code snippet? Yes, you guessed it right- the condition. That condition will never be met: by incrementing by 2 each time from the starting counter value of 1, it will only print out odd numbers, which means the `counter i` variable will never be set to the value of 20, so it will keep running until your program crashes(oops!). It's recommended to not use `==` or `!==` in a for loop, instead use `>=` or `<=`, which will prevent an infinite loop even if the condition is not met.

**Can we use for loops with Arrays and Strings?**
The answer is yes. Let’s look at a few examples of using a `for loop` with arrays and strings below:

```javascript
const studentsName = [“Uma”, “Collin”, “Jordan”, “Henry”, “Wills”]
 
for(let i = 0; i < studentsName.length;  i++) {
     console.log(studentsName[i])
 }
>Uma
>Collin
>Jordan
>Henry
>Wills

```
Let's take a look at another example that has objects inside an array.

```javascript
const myFamily = [
{
  Name: “Umesh”,
  Age: 36
},
{
  Name: “Uma”,
  Age: 35
},
{
   Name: “Aiden”,
   Age: 4
}
]

for(let i = 0; i < myFamily.length;  i++) {
   let familyMember = myFamily[i]  	//this has to be inside the loop to access one object at a time
     console.log(`${familyMember.name} is ${familyMember.age} years old.`)
 }
>Umesh is 36 years old.
>Uma is 35 years old.
>Aiden is 4 years old.

```
Now let's take a look at a string. This time we will use decrement(--) instead of increment(++):
```javascript
const greet = “Hello!”
for(let i = greet.length - 1; i >= 0; i--) {
   console.log(i, greet[i].toUpperCase())
}
>5, !
>4, O
>3, L
>2, L
>1, E
>0, H

```
Pretty straight forward right?

### while loop:
A while loop continues to run as long as its test condition is true.
Syntax:
```javascript
while(condition) { 	//condition needs to be true
  //statement	-need to make it false somehow, otherwise, it will turn into an infinite loop
}
```
Let's take a look at a simple `While Loop` example:
```javascript
let age = 8

while(age < 18) {
      console.log("your age is less than 18, you can't have a drink right now!") 
      age++
   }
   console.log("You are now over 18, enjoy your first drink. Cheers!!")

>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>your age is less than 18, you can't have a drink right now!
>You are now over 18, enjoy your first drink. Cheers!!

```
Here is another example of a `While loop`:

```javascript

const target = Math.floor(Math.random()* 10)
let yourGuess = Math.floor(Math.random()* 10)

while(yourGuess !== target) {
    console.log('try again') 
    yourGuess = Math.floor(Math.random() * 10)
  }

console.log(`Target: ${target} yourGuess: ${yourGuess}`) 
console.log('Congrats you win!')

> try again
> Target: 2 yourGuess: 2
> Congrats you win!

```

### for...of loop:
`for...of ` is an easy way of iterating over arrays or other iterable objects.
Syntax: 
 ```javascript
 for( variable of iterable) {
       statement
  }

```
We can use the same example from the `for loop` with arrays to see the difference between these two methods. With a `for loop`, to access an element from an array we had to do this:

```javascript
const studentsName = [“Uma”, “Collin”, “Jordan”, “Henry”, “Wills”]

 for(let i = 0; i < studentsName.length;  i++) {
     console.log(studentsName[i])
 }
>Uma
>Collin
>Jordan
>Henry
>Wills

```
Now with a `for...of` loop we can simply do like so:

```javascript
const studentsName = [“Uma”, “Collin”, “Jordan”, “Henry”, “Wills”]

for(let name of studentsName ) {
     console.log(name)
 }
>Uma
>Collin
>Jordan
>Henry
>Wills

```
BOOM. How cool was that? We can use the same logic with a `String`.

```javascript
const word = “welcome!”

for(let char of word) {
   console.log(char)
}
> w
> e
> l
> c
> o
> m
> e
> !

```
`for...of` is a great fit most of the time but where we need to use indexes, it’s not recommended to use `for..of`. In that case, a `for loop` is better to use. For example, if we have two arrays:

```javascript
const words1 = [“orange”, “peanut”, “strawberry”]
const words2 = [“juice”, “butter”, “jam”]

```
To print the corresponding indexes of “orange juice”, “peanut butter” and “strawberry jam”, we need to have access to the indexes which is not possible with the `for...of` loop but we can easily solve it with a `for loop` like so:

```javascript
for(let i = 0; i < words1.length; i++) {
    console.log(`${words1[i]  ${words2[i]}`)
}
> orange juice
> peanut butter
> strawberry jam

```
Neat!! 

Now the question is can we use `for...of` with an object?
The answer is yes but it's not as straightforward as with an array. Objects are not iterable. So how can we use a `for...of` loop with an object? Here is an example:

```javascript
const progressReportOfAiden = {
    math: 10,
    science: 9.5,
    english: 9.5,
    art: 9,
    history: 8,
    social: 8.5,
    nepali: 8
}

// to print out only subject names we can do so by:
// in Object.keys Object needs to be capitalized. 

for(let subject of Object.keys(progressReportOfAiden) {
    console.log(subject)
}
> math
> science
> english
> art
> history
> social
> nepali

```
If you are not familiar with `Object.keys`, have a look at this piece of documentation. Similarly, to access only values use `Object.values` instead of `Object.keys`.

### for...in loop:
`for...in` loops over keys in objects, whereas in `for...of` we had to use Object.keys to access keys to loop over. This is the easier way to loop over keys.
Syntax:
```javascript
for( variable in object) {
   statement
}

```
Now let’s use a `for...in` loop in the above `for...of` loop example:

```javascript
const progressReportOfAiden = {
    math: 10,
    science: 9.5,
    english: 9.5,
    art: 9,
    history: 8,
    social: 8.5,
    nepali: 8
}

// to print out only subject names we can do it so by:

for(let subject in progressReportOfAiden) {
    console.log(subject)
}
> math
> science
> english
> art
> history
> social
> nepali

// to access values just console.log(progressReportOfAiden[subjects])

```
Ahhh much easier... And that's all for javascript loops. Thank you for reading. 
Happy coding.