Loops are one of the basic programming element used to cycle through a set of instructions until some condition is met lets understand its basic need with the help of an example.

Suppose we want to program a robot to distribute chocolates to each individual he come across and initially it has 100 chocolates. Now it's obvious that after distributing all the chocolates the robot have to return to refill the stock. So we can say in normal language to "continue distributing chocolates until you have exhausted all of them and in such case return back to refill the stock". From this example we can understand that with the help of a condition we can execute the same instruction to distribute chocolate until a point comes when there is nothing left and in such cases loops are used.

1. While loops

It is one of the most popular loop and executes a given set of instructions until a condition is met. Basic syntax of while loop is given below.

while(condition) {
    statement
}

Before the statement is executed the condition is checked and if it comes out to be true then it is executed and when it turns false execution stops. Suppose we want to print numbers from 1 - 5 using a while loop then it can be done like this

let num = 1;
while (num < 6) {
    console.log(num);
    num++
}

It is very common to enter an infinite while loop while programming so one must be very careful to check the condition before executing.

2. For loop

This is another type of widely used loop whose syntax looks something like this

for (initialStatement ; conditionalStatement ; incrementStatement) {
    statement
}

Here the initialStatement is the first thing that runs and any variable created is block scoped meaning they can't be accessed from outside the for loop. Next comes conditionalStatement which returns true or false if it's true then the statement executes else the loop is terminated. Lastly we have incrementStatement which runs after the statement executes and basically increases or decreases the variable being created at initial Statement.

Suppose we want to print numbers from 1 - 5 using for loop then it can be done as follows

for (let num = 0 ; num < 6 ; num++) {
    console.log(num);
}

3. Do...while loop

A do...while loop is very similar to while loop and is structured like this

do {
  statement
} while (condition);

In do...while loop the first thing that happens is that the statement is executed. Once that happens, condition is checked and if it comes out to be true, the statement executed again and keeps executing until the condition turns false. Unlike while loop the do...while loop is executed at least once.

Suppose we want to print numbers from 1 - 5 using the do-while loop then it can be done like this.

let num = 1;
do {
    console.log(num);
    num++
} while (num < 6);

4. For...in loop

It is used with an object and is structured like this

for (variable in object) {
 statement
}

This loops goes over the variable property of an object which may be key or index of the object depending on its data type. For example for an array it is its index and for an object its the keys through which the loop iterates.

Using with an array

const arr = [1 , 2 , 3];

for (let num in arr) {
    console.log(num);
}

OUTPUT -> 0 , 1 , 2

Using with an object

const food = {
    a: "apple",
  b: "banana"
}
for (let ele in food){
    console.log(ele);
}

OUTPUT-> "a" , "b"

5. For...of loop

It is the last kind of loop which can be used with the iterable objects like array, maps , string etc and its syntax is something like this

for (variable of iterableObject) {
 statement
}

Unlike the for...in loop this one goes through the objects property value. Let's compare the both with an example

const arr = [1 , 2 , 3];

for (let ele of arr){
    console.log(ele);
}

OUTPUT-> 1 , 2 , 3

If we would have used the for...in loop then the output would have been 0 , 1 , 2 see the difference. Let's say we have a string the we can print each of its character using this loop very easily

const string = “cat”;
for (const value of string) {
 console.log(value);
}

OUTPUT-> "c" , "a" , "t"

If you want to take a deep dive into this topic then you can refer this.