Why do we need loops?

There's a task given to you to display numbers from 1 to 10, both inclusive. How will you do it?

Way-1

To console log all numbers one by one manually.

The problem with way-1 is that it will become very difficult to do the same when we want to display numbers from 1 to 1 million.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Way-2

Using loops, with loops we don't have to manually do console log for each number.

What are loops?

A loop is a code statement that runs a code block as many times as you want the code block to run.

Types of loops in JavaScript

Different Kinds of Loops

• for

• while

• do/while

• for/in

• for/of

The For Loop

Syntax

for (initialize;condition;update) {
  // code block to be executed
}

initialize- you have to declare a variable here.

condition- until when the loop will run.

update- how to increment/decrement or update the variable created.

Example

Taking the above example, displaying the numbers from 1-10, both inclusive, using loops.

for (let i=1;i<=10;i++) {
  console.log(i);
}

The loop will run 10 times and each time it will console log i .i will get value from 1 to 10.

i here is the variable initialized

i<=10 is the condition

i++ is the updation of variable.

When to use it?

Use for loop when you know when to stop the loop. In the above example, we knew to stop the loop till 10, so we made sure that the loop runs till 10 using the condition.

The While loop

Syntax

initialize
while (condition) {
  // code block to be executed
    update
}

In while loop you need to initialize first, then write the condition, and update after the code of block that you want to execute, is executed.

If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

Example

let i=1;                //initialize 
while(i<=10){           //condition
    console.log(i);  
    i++;                //update 
}

When to use it?

Use a while loop when you don't know for how long the loop will run.

For example: we ask for input of a number from the user and we display numbers until the number becomes 0. In this we don't know the number input so we don't know until when the loop will run but we know when to stop it i.e when number is less than 0.

let input=9;// you won't take input in javascript like this,just to show you i am taking input by myself.
while(input>=0){
    console.log(input);
    input--;
}
// will display 
9
8
7
6
5
4
3
2
1
0

The Do while loop

Syntax

initialize
do {
  // code block to be executed
   update
}
while (condition);

When to use it?

Use do while loop when you want the loop to run at least once irrespective of whether the condition is matching or not.

Example

Take an input and display the number which was input and numbers till 0 only when the input is less than 10.

let input =-1;

do {
  console.log(input)
  i--;
}
while (i >0);  
//The output will be -1 as the do while loop will run atleast once irrespective of whether the condition is matching or not.The condition doesn't match here.

The For In Loop

Syntax

for (key in object) {
  // code block to be executed
}

"key"- here is a variable or the initialization step that we were doing in above loops.

object -is the name of the object that you want the loop to run through.

Example

You don't need any conditions and updation here. Generally used with objects.

const person = {fname:"John", lname:"Doe", age:25};
for (let x in person) {
  console.log(x);
}
// the output will be the keys in the object i.e
                                                //fname lname age

When to use it?

Use for in statement to loop through the properties of an Object.

The For Of Loop

Syntax

for (variable of iterable) {
  // code block to be executed
}

The JavaScript for of statement loops through the values of an iterable object.

It lets you loop over iterable data structures such as Arrays, Strings, Maps, etc.

Example

const cars = ["BMW", "Volvo", "Mini"];

for (let x of cars) {
  console.log(x);
}
// output will be BMWVolvoMini

In this, the x is getting all the values stored in cars one by one and then its console logs all the x coming.

When to use it?

Use it to loop through iterables like arrays, maps etc.

Thank you for reading, have a nice day ahead.