Javascript loops (for, for in, while and do while loops)

Javascript loops (for, for in, while and do while loops)

Learn how to use a variety of Javascript loops to execute code multiple times depending on your needs


Loops are a fundamental part of programming, they allow you to repeat a block of code based according to your needs


For loops

 

for(var i = 1 ; i <=2 ; i++){         
 console.log("This loop has run " + i + " times\t");         
}         

The above loop is called a for loop, this is used to run a block of code a set amount of times. The loop has three parts:


-The first part specifies a variable to use in the loop and a number assigned to it (this can be any number).


-The second part checks whether a condition is true in which case it will run the code, else it will exit the loop.


-The third part is used to increase or decrease the value of the loop variable, this is necessary to ensure the loop does not run infinitely, you must make sure the condition in the second part eventually returns false so that the loop can exit.


The loop variable can be used within the loop, this is useful for many situations such as looping through the values of an array.


The above loop will run twice and output the following to the console:

This loop has run 1 times         
This loop has run 2 times         

Let's go through the parts of the loop for every time is has run.


1 - The first time the loop runs, "i" is equal to 1. The loop checks whether "i" is smaller or equal to 2 (i<=2) which in this case it is, and so it runs the code in the block. After the code has executed, it increments the code by 1 (i++) and runs the loop again.


2 - The second time the loop runs, "i" is equal to 2. The loop again checks whether "i"is smaller than or equal 2 which again it is, so it runs the block of code. It then increments "i" when it is done executing the code block.


3 - The third time the loop runs, "i" is equal to 3, this means it is bigger and not equal to 2 which means the loop will not execute. The loop is now finished and will move on to the next piece of code.


Inverse for loops

 

for(var i = 2 ; i >=1 ; i--){         
 console.log("i equals:  " + i);         
}         

Running for loops backwards is sometimes necessary. The above loop is the same as the first one in that it will run twice, but this time "i" will start off at 2 and end when it is smaller than 1.


Output:


i equals: 2         
i equals: 1


For...in loops

 

var cars = ["Renault","Toyota","BMW"];       
var i;        
for(i in cars){         
 console.log(cars[ i ]+"\t");         
}         

Output:

Renault         
Toyota         
BMW

A for...in loop is generally used to loop through the contents of an object or an array. In the above example we have an array with 3 values.


The syntax of a for...in loop is "for( temporary_variable in array)". So we have a temporary variable "i" that will be equal to the index value of the current element for the current iteration.


While loops

 

var checker = true;         
var counter = 0;         
while(checker){         
 console.log("counter is equal to: " + counter + "\t");         
 if(counter===3){         
  checker = false;         
 }         
 counter++;         
}         

A while loops runs a block of code as long as a given value is true. In the above example we are using a boolean variable "checker" as the given value, we set this to true so that the while loop will run. We also use a counter that will start at 0 and will be incremented each time the loop runs, using an if statement we will change the value of "checker" to false once "counter" has reached 3.


Output:

counter is equal to: 0         
counter is equal to: 1         
counter is equal to: 2         
counter is equal to: 3


Do while loops

 

var checker = false;         
do{         
 console.log("hello world");         
}while(checker);         

A do while is the same as a regular while loop, except the given value is only checked after the code block has been executed, so regardless of whether or not the given value is false, the loop will run at least once.



Loops can sometimes be difficult to understand for new developers. A useful way of understanding a troublesome loop is to write out what is happening during each iteration of the loop. Try to break down every aspect of it to see why it is not working.



Christopher Thornton@Instructobit 4 years ago
or