How To Loop/Iterate Array In JavaScript?

JavaScript provides the array data structure in order to store multiple items or data in a single variable. A single array can store single or multiple items where they can be added, updated, and removed during usage. Even array variables provide a function for add, update, remove you may need to loop or iterate over a JavaScript array for different reasons. In this tutorial, we will examine how to loop or iterate over a JavaScript array?

Create Example Array

Before starting the loop of JavaScript array we will create some example arrays with different types of items.

var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

JavaScript Array Loop/Iteration Methods

JavaScript provides different methods in order to itarete or loop over an array. Below is the list of the JavaScript Array Loop methods.

  • for Statement
  • for/in Statement
  • for/of Statement
  • while Statement
  • do/while Statement

Loop Array with for

for is a popular iteration statement which is provided all popular progrramming languages. for is mainly used to iterate given array. The for statment has the following syntax.

for( start_statement ; condition ;  step_process){
   code;
}
  • start_statement is executed only once when the for statement is started.
  • condition is the condition that will be checked in every iteration and if it is no true the for statement will be exited or ended.
  • step_process is evaluated in every iteration which is generally used to increase some counter.
  • code is the code block that will be executed in every iteration.

Below you can find an example how to loop over JavaScript number array, string array or complex array.

var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

for ( i = 0 ; i < names.length ; i++) {
   console.writeln(names[i]);
}

for ( i = 0 ; i < numbers.length ; i++) {
   console.writeln(numbers[i]);
}

for ( i = 0 ; i < names_numbers.length ; i++) {
   console.writeln(names_numbers[i]);
}

Loop Array with for/in

for..in statement is used like for..each which is defined in other popular programming languages. We can use it to iterate over a given list of items where an array contains. for/in has the following simple syntax. This can be especially usefull for iterating JSON objects.

for ( VARIABLE in ARRAY ) {
   CODE;
}
  • VARIABLE is set in each iteration for the current item.
  • ARRAY is the array data where its every item will be iterated sequencially.
  • CODE is the code block that will executed in every iteration.
var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

for ( item in names) {
   console.writeln( item );
}

for ( item in numbers ) {
   console.writeln( item );
}

for ( item in names_numbers ) {
   console.writeln( item );
}

Loop Array with for/of

for..of statement provides the very same usage with the for..in where it will iterate over the given iterable objects like Array, String, Map, etc. The syntax is like below.

for ( VARIABLE of ARRAY ) {
   CODE;
}

We can see examples about the for..of statement like below.

var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

for ( item of names) {
   console.writeln( item );
}

for ( item of numbers ) {
   console.writeln( item );
}

for ( item of names_numbers ) {
   console.writeln( item );
}

Loop Array with while

while statement is another popular loop statement provided by other languages. It provides simpler usage than for loop. We can use the while loop in order to iterate over an array. while the loop has the following syntax.

while(condition){
   code;
}
  • condition will be checked in every step where when it is false the loop will end.
  • code will be executed in every step of the loop.
var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

i = 0 ;

while ( i++ < names.length ) {
   console.writeln( names[i] );
}


i = 0 ;

while ( i++ < numbers.length ) {
   console.writeln( numbers[i]);
}


i = 0 ;

while ( i++ < names.length ) {
   console.writeln( names_numbers[i]);
}

Loop Array with do/while

do..while loop is very similar to the while loop. The only difference is that the loop is iterated first and then the condition is checked in do..while loop. do..while loop has the following syntax.

do {
   code;
} while (condition)

An array can be iterated with do..while loop like below.

var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

i = 0 ;

do {
   console.writeln( names[i] );
}
 while ( i++ < names.length )


i = 0 ;

do {
   console.writeln( numbers[i]);
}
 while ( i++ < numbers.length )


i = 0 ;

do {
   console.writeln( names_numbers[i]);
} while ( i++ < names.length )

Loop Array with Array.forEach() Method

JavaScript array types provide the method forEach() in order to iterate over the specified array. forEach() method is called with the array variable. The forEach() method accepts a function which has 3 parameters to be used for the loop. These 3 parameters are;

  • The item value
  • The item index
  • The array itself

Not all of 3 parameters are mandatory where only item value can be specified if the index and array are not specified.

var names = [ "Ahmet" , "Ali" , "Baydan" , "Elif" ];

var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 ];

var names_numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , "Ahmet" , "Ali" , "Baydan" , "Elif" ];

function f1(value){
   console.writeln(value);
}

function f2( value , index , array ){

   console.writeln(index);
   console.writeln(value);
}


names.forEach(f1);

numbers.forEach(f2);

names_numbers.forEach(f1);

Leave a Comment