How to write loops in JavaScript

Writing loops in JavaScript can be hard to get your head around at first. Here is a quick guide on the different kinds of loops you can use and how to write them.


Loops can get your head a bit loopy if you’re not clear on the syntax.

Here’s a diagram to help break it down for you:

The idea behind loops in JavaScript is that you repeat a block of code until a certain condition is fulfilled.

This means, the condition is always finite in some way or has the potential to evaluate to either true or false.

If this doesn’t happen, your code can crash and you’ll have to restart your application.

There are 5 different kinds of loops — for for/in for/of while do/while

for loops

for loop has three statements in the condition area.

The first statement is what gets executed before the code runs. This part gets executed once only.

The second statement is the condition for executing the code block.

The third statement is executed after your code gets executed.

In code, it looks something like this:

for (statement 1; statement 2; statement3){ 
// some code here

Here’s what it looks like in diagram form:

for/in loops

Let’s pretend you have an object.

And for whatever reason, you need to work your way through the properties of this object.

Never fear! for/in loop is here!

How it works:

What it looks like in code:

var yourObjNameHere = { 
   name: "Tibbers", 
   type: "cat", 
   color: "ginger" 

var loopMe;

for( loopMe in yourObjNameHere ) {
   //do something with yourObjNameHere[loopMe] 

for/of loops

for of statements loops though the values of iterable objects. So this means you can use it on arrays, strings, maps and anything that looks like a list of some sort.

What it looks like:

var yourIterable = ["Tibbers", "Ruffles", "Rufus", "Roland"];

var trackerVariable;

for ( trackerVariable of yourIterable ) { 
   //do something with trackerVariable 

for of statements can also loops over strings. This means, it’ll go through each character of your string and the trackerVariable is representative of the position and value.


var someTxt = 'Hello there!';
var x; //aka, your tracker variable

for( x in someTxt ){


The while loop continues to execute a block of code as long as the condition remains true. This means that the condition has to evaluate to a boolean result.

Rather than using for, the keyword while is used instead.

In code, it looks something like this:

while( condition ){
//some code here

If you are iterating over something for a specified amount of time, you’ll need to be clear on this too.

For example:

var i;
while( i < 5 ){
//do something

In the example above, the i needs to be increased or else the loop will continue to run until the end of time (or when your code crashes).


do while is a similar concept to while, just written differently. The difference between do while and while is that do while will execute at least once, even if the condition is false.

Here’s the syntax for it:

do {
//what am I doing? you tell me...
} while (condition)

And that’s basically it for JavaScript loops.

I hope this short tutorial helped you become better at writing loops and bring awareness to the ones you weren’t aware of.

Remember to share!



About Author /

I code. I write. I hustle. Living the #devLife remotely. Subscribe to my newsletter to stay connected with my latest posts and dev thoughts. Want to collaborate? DM me on LinkedIn

Leave a Comment

Your email address will not be published.

Start typing and press Enter to search