JavaScript For Loop

Loop is often used while programming it is fairly a simple concept. Loop in JavaScript is of various types. Such as JavaScript for loop, foreach loop, for of loop, for in loop, while loop, and Do-while loop.

Introduction to For-Loop

In this tutorial, we gonna learn how to use For loop to iterate the value and print it.
Let’s take an example- Print all numbers from 1 to 10

The tedious way we can do without look is to print each number again and again until the last number.

document.getElementById("print").innerHTML = 1;
document.getElementById("print").innerHTML = 2;
document.getElementById("print").innerHTML = 3;
document.getElementById("print").innerHTML = 4;
.
.
.
document.getElementById("print").innerHTML = 10;

The above way is not an ideal way to do things. This is where loops come in, rather than writing the same thing again and again we can loop the values and print it.

var theNumber="";
for(var i=1;i<=10;i++){
    theNumber=theNumber+i+'';
}    
document.getElementById("print").innerHTML = theNumber;

JavaScript Loop through Array

Likewise, JavaScript can be used to loop through an array. Let take an array and see the code in action.

Here is an example of an Array-

const city = ["New York", "Los Angeles", "Chicago","Houston", "Dallas"];

Using JavaScript For Loop

for(let i=0;i<city.length;i++){
console.log(city[i]);
}

Output

"Los Angeles"
"Chicago"
"Houston"
"Dallas"

JavaScript For of Loop

for of loop is used to iterate through the values of an iterable object.

Using JavaScript Foreach Loop/ for loop shorthand

for(const name of city){
console.log(name);
}

JavaScript For-Loop Break

Let’s see a for-loop break with a condition-
Case: The loop must break if Houston is found in the city array

for(let i=0;i<city.length;i++){

  if(city[i]=='Houston'){
    console.log(city[i] +" found loop break successful");
    break;
  }
  else{
  	console.log("looping..");
  }

}

Output on Console

"looping.."
"looping.."
"looping.."
"Houston found loop break successful"

For in loop in JavaScript

JavaScript For in loop is used to loop through the properties of an object

const country = {name:"United States", capital:"Washington DC"}; 

let val = "";
for (let i in country) {
  val += country[i] + " "; 
}
console.log(val);

Output on Console

"United States Washington DC "

JavaScript loop through JSON object

var json = [{
    "Name" : "John", 
    "city"   : "NY",
    "Age" : "25",
    "Email": "john@email.se"
},
{
    "Name" : "Lilly", 
    "city"   : "LA",
    "Age" : "22",
    "Email": "lilly@email.se"
}];

for(var i = 0; i < json.length; i++) {
    var obj = json[i];

    console.log(obj.Name);
}

Output on Console

"John"
"Lilly"