In this article, we will understand the loops in JS (Javascript), there are different types of loops such as for, while, do…while, etc loops that we are going to learn.

Loops are used in JavaScript to perform repeated tasks based on a condition. The basic idea behind a loop is to automate the repetitive tasks within a program to save time and effort.

For example, if you want to show a message 50 times, then you can use a loop. You can achieve much more with loops.

So, Let’s discuss more on the types of loops and understand with the examples.


Types of Loops in JS (Javascript)

Javascript has five different types of loops:

1️⃣ for Loop: loops through a block of code until the counter reaches a specified number.

2️⃣ while Loop: loops through a block of code as long as the condition specified evaluates to true.

3️⃣ do…while Loop: loops that run a block of code once, then check the condition. If the condition is true, the statement is repeated as long as the specified condition is true.

4️⃣ for…in Loop: loops through the properties of an object.

5️⃣ for…of Loop: loops over iterable objects such as arrays, strings, maps, etc.

✅ For Loop

The for loop repeats a block of code as long as a certain condition is met. It is typically used to execute a block of code a certain number of times. Its syntax is:

The for loop consists of three optional expressions, followed by a code block:

  1. The initialization initializes and/or declares variables and executes only once.
  2. The condition is evaluated.
    • If the condition is false, the for loop is terminated.
    • If the condition is true, the block of code inside of the for loop is executed.
  3. The increment updates the value of initialExpression when the condition is true.
  4. The condition is evaluated again. This process continues until the condition is false.

If you want to learn more about the conditions, visit here Conditional Statement in JS – with examples.

for-loop-chart
For Loop Flowchart

For example: To print the sum of 10 Natural Numbers.

Here, the value of the sum is 0 initially. Then, a for loop is iterated from i = 1 to 4. In each iteration, i is added to the sum and its value is increased by 1.

When i become 5, the test condition is false and the sum will be equal to 1 + 2 + 3 + 4.

📔 Note: You can achieve the same result by using the different ways of programming, programming is all about logic.

✅ While loop

The while loop loops through a block of code as long as the specified condition evaluates to true. As soon as the condition fails, the loop is stopped. The syntax of the while loop is:

Here,

  1. A while loop evaluates the condition inside the parenthesis ( ).
  2. If the condition evaluates to true, the code inside the while loop is executed.
  3. The condition is evaluated again.
  4. This process continues until the condition is false.
  5. When the condition evaluates to false, the loop stops.

To learn more about the conditions, visit Introduction to Comparison and Logical Operators in JS

while-loop
While loop flowchart

📔 Note: There are several other logic and ways to use the loop to get the same result. The only thing which would be remaining the same is a representation of the while loop.

✅Do…While loop

The do-while loop is a variant of the while loop, which evaluates the condition at the end of each loop iteration.

See the expression explanation,

  1. The body of the loop is executed at first. Then the condition is evaluated.
  2. If the condition evaluates to true, the body of the loop inside the do statement is executed again.
  3. The condition is evaluated once again.
  4. If the condition evaluates to true, the body of the loop inside the do statement is executed again.
  5. This process continues until the condition evaluates to false. Then the loop stops.
Do-while loop in C - Full explanation with examples and tutorials
do-while loop flowchart

Let’s understand with an example:

It defines a loop that starts with i=1. It will then print the output and increase the value of variable i by 1. After that, the condition is evaluated, and the loop will continue to run as long as the variable i is less than, or equal to 5.

✅ For..in loop

The for...in loop iterates over the properties of an object or the elements of an array. For each property, the code in the code block is executed.

In each iteration of the loop, a key is assigned to the key variable. The loop continues for all object properties.

  • Let’s take an example: Taking object

📔 Note: The loop counter i.e. key in the for-in loop is a string, not a number. It contains the name of the current property or the index of the current array element.

  • You can also use for...in with strings. For example,
  • You can also use for...in with arrays. For example,

📔 Note: You should not use for...in to iterate over an array where the index order is important.

✅ For..of loop

ES6 introduces a new for-of loop that allows us to iterate over arrays or other iterable objects (e.g. strings and special collection types like Set and Map) very easily.

Let’s understand with Examples:

  • Iterate over an array
  • To Iterate over string
  • Using Map
  • Iterate over Set

So, this is all about the for, while, do..while, for…in, for…of loops in Javascript (JS). Hope you got to know more about it and I tried to make it easier for you with the examples. Do a lot of practice and use these loops in your projects.

I hope you enjoyed the article and if you found this useful, then please share it with your friends and colleagues. If this post helps you, then spread this so that other people can also benefit.

If you have any queries please feel free to post them in the comments section or anything that you want to ask through mail contact.

Thank you 😉. Happy Coding 🌐

Also read,

What is WhatsApp’s Zero-Day Vulnerability Leading Users into Danger? WhatsApp Call Links Features Starts Rolling Out To Users, What it Does JioPhone 5G Specs Surface: Tipped to get Snapdragon Chipset, 5,000mAh Can Moonlighting Be Allowed?- Global HR Experts’ Perspective Capgemini Off Campus Drive 2022 | Freshers | Engineering | PAN India Java Developer Salary in India – For Freshers & Experienced Flipkart Big Billion Days Sale Ends on Sept 30: Best 5G Phone Deals DA Hike: Good news, Waiting for Central Employees is over, Important Update On Dearness Allowance How will 5G India launch impact the lives of Indians? How to Check PNR Status and Live Train Status on WhatsApp