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

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.

Example:

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

for( x in someTxt ){
 console.log(x);
}

while

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
i++
}

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

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!

Report

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

How does CSS work?

How to Create and Read Things In Firebase