JavaScript array’s are great ways of storing current state and long list of data. Looping through array is a common task we perform as a developer. Looping is a process through iterate one value upcomming next value. We can also use conditional statement inside loops to determine our output.

JavaScript provides us with statement and methods to loop through array’s so that we can improve this process in effective way. In this post we’ll provide you with so important tips for array looping.

Table of Contents

• Using For Loop
• Using while Loop
• Using do while Loop
• Using For in Loop
• Using For of Loop
• Using forEach() method
• Conclusion

Using For Loop

The for loop is considered as the simplest among loops because of its structure and inline initialization, condition checking and increamentation of variable.
This loop is easy to debug as all the essential information is declared in single line.

Let us look at a basic example of for loop.

let names = ["Mathew", "Peter", "Naresh", "Suman", "Rahul"];
console.log("Index | Names");
for(let i = 0; i < names.length; i++){
    console.log(i+"  "+names[i]);
}

//Console Output
Index | Names
0  Mathew
1  Peter
2  Naresh
3  Suman
4  Rahul

Use of for loop to iterate over names

The .length is array property which returns number of items in array. The variable i calls next index items every time its value is incremented.

Using while Loop

In while loop we first declare the index then check condition and at end increment the index value.

top_brands = ["Apple", "Microsoft", "Google", "Reliance", "Mahindra"];
index=0;
console.log("Index | Brands");
while(index < top_brands.length){
    console.log(index+"  "+top_brands[index]);
    index++;
}

//Console Output
Index | Brands
    0  Apple
    1  Microsoft
    2  Google
    3  Reliance
    4  Mahindra

Use of while loop in Javascript

The while loop also serves for multiple purposes such as looping till condition is satisfied.
Let us learn by example.

let top_brands = ["Apple", "Microsoft", "Google", "Reliance", "Mahindra"];
index=0;
let search = "Google";
let has_search_result_found = false;

while(has_search_result_found==false){
    if(top_brands[index]==search){
        console.log("Yes your search value "+top_brands[index]+" exists");
        has_search_result_found=true;
    }
    if(index > top_brands[index].length){
        console.log("Sorry no search results found ");
        break;
    }
    index++;
}

//Console Output
Yes your search value Google exists

Using do while Loop

Do-While loop has a slightly different behaviour compared to other loops. It first iterates and than checks for given condition. This means that first loop of do-while always executes not matter what the given condition is.

let number = 10, index=0;
do{
    console.log(index);
    index+=1
}while(index<=0);

//Console Output
0

let number = 10, index=0;
do{
    console.log(index);
    index+=1
}while(index<=3);

//Console Output
0
1
2
3

Using For in Loop

JavaScript For in loop implicitly retrives array key and loops over all items. Condition checking can be done inside loop and break statement can be called is condition is met.

let programming_langauges = ["Javascript", "Python", "PHP", "Ruby", "Julia"];

for(let index in programming_langauges){
    console.log(programming_langauges[index])
}

//Console Output
Javascript
Python
PHP
Ruby
Julia

In above example index contains key or index of programming_langauges array. To display value of that particular array index pass index inside square brackets of array programming_langauges.

Using For of Loop

The For of loop provides easy and simple way of iterating over array and array of objects.

let mobile_brands = ["Apple", "Nokia", "Blackberry"];
for(let mobile_brand of mobile_brands){
    console.log(mobile_brand);
}

//Console Output
Apple
Nokia
Blackberry

Get current index in For of loop.

let mobile_brands = ["Apple", "Nokia", "Blackberry"];
for(let [index,mobile_brand] of mobile_brands.entries()){
    console.log(index, mobile_brand);
}

//Console Output
0 "Apple"
1 "Nokia"
2 "Blackberry"

Using forEach() method

The forEach() method is another way of iterating over array of items. This method works on array it call function foreach item.

let names = ["Jack", "John", "James"];

names.forEach((name, index)=>{
    console.log(name, index);
});

//Console Output
Jack 0
John 1
James 2

Conclusion

So its time to say bye we have come to end of our post on JavaScript Tips for Array Looping and Iteration for Beginners.If you like our content then please do share it and comment to clarify your doubts.

Related Posts

• Learn Javascript Object.defineProperty() method for Beginners
• Explained with Examples Javascript Object.values() method for Beginners

Summary

Reviewer

The Code Learners

Review Date

2020-12-01

Reviewed Item

JavaScript Tips for Array Looping and Iteration for Beginners

Author Rating

5

Software Name

Javascript Programming

Software Name

Windows Os, Mac Os, Ubuntu Os

Software Category

Web Development