JavaScript Tutorial
JavaScript Basics
JavaScript Objects
- js-object
- js-array
- js-string
- js-date
- js-math
- js-number
- js-boolean
JavaScript BOM
JavaScript DOM
JavaScript Validation
- js-form-validation
- js-email-validation
JavaScript OOPs
JavaScript Cookies
JavaScript Events
Exception Handling
- js-exception-handling
- javascript-try-catch
JavaScript Misc
JavaScript Advance
Differences
- jquery-vs-javascript
- javascript-vs-php
Questions
Interview Questions
- javascript-i/q

Traverse array object using JavaScript

JavaScript does not offer any specific in-built function to traverse the array elements/objects. You can traverse an array simply using for loop or directly by element index. An array contains multiple elements of the same type, which can be traverse using for loop.

In this chapter, we will discuss all the methods to traverse an array:

Simple Array traversing

In this example, we will simply traverse an array directly from the array index.

Copy Code

     <script>
// declare and initialize an array
var message = ["Have", " a", " good", " day"]; 

//traverse the array elements
document.write("array[0] = " + message[0]);
document.write("<br> array[1] = " + message[1]);
document.write("<br> array[2] = " + message[2]);
document.write("<br> array[3] = " + message[3]);
</script>

    

Test it Now

Output

Save the code and run it on the browser. The array will traverse and print the array elements.

array[0] = Have 
array[1] = a 
array[2] = good 
array[3] = day

Screenshot

Traverse and display Array elements

This example will traverse an array directly using the array index and display the array string.

Copy Code

     <script>
// declare and initialize an array
var message = ["Have", " a", " good", " day"]; 

//traverse the array elements
document.write(message[0]);
document.write(message[1]);
document.write(message[2]);
document.write(message[3]);
</script>

    

Test it Now

Output

Save the code and run it on the browser. The array will traverse and print the array elements.

Have a good day

Screenshot

Besides this, JavaScript offers various other ways to traverse an array. We are discussing the most used and easy method here.

Traverse array using for loop

The above method does not work efficiently when the array is lengthy or has too many variables. So, we have to try any other method to traverse an array to save time and effort.

To overcome this problem, the concept of the loop has come, which helps to traverse an array by providing a small code. We will now use the different loops to traverse the array elements and display them on the web. You can use while, do-while, for loop or for each loop to traverse an array. It is similar to the other programming languages like C, C++, and Java.

Example 1

Below is an example of traversing an array using for loop and printing the string elements of the array.

Copy Code

     <script>
// declare and initialize an array
var message = ["Die", " with", " memories,", " not", " dreams"]; 

//traverse the array and print the elements
for(var i=0; i< message.length; i++){
document.write(message[i]);
}
</script>

    

Test it Now

Output

Save the code and run it on the browser. The array will traverse and print the array elements.

Die with memories, not dreams

Screenshot

See the web screenshot for the above JavaScript code:

Example 2

Below is an example of traversing an array using the for loop and printing the integer elements present in this array.

Copy Code

     <script>
// declare and initialize an array with integer values
var integerArray = [34, 67, 12, 89, 45, 79]; 

//traverse the array using for loop 
for(var i=0; i< integerArray.length; i++) {
       //display the array elements
      document.write(integerArray[i] + "<br>");
}
</script>

    

Test it Now

Output

Save the code and run it on the browser. The array will traverse and print the array elements.

Screenshot

See the web screenshot for the above JavaScript code:

Example 3: Traverse using while loop

In this example, we will use a while loop to traverse an array and then display the elements present in this array.

Copy Code

     <script>
// declare and initialize an array with integer values
var integerArray = [34, 67, 12, 89, 45, 79]; 
var i=0;

document.write("Elements in array: <br>");
//traverse the array using while loop
while( i< integerArray.length) {
   //display the array elements
   document.write(integerArray[i] + "<br>");
   i++;
}
</script>

    

Test it Now

Output

Save the code and run it on the browser. The array will traverse and print the array elements.

Elements in array:
34
67
12
89
45
79

Screenshot

See the web screenshot for the above JavaScript code:

Traverse array using forEach() method

Apart from basic loops (for, while, and do-while loop), JavaScript has one more loop, or you can also call it an array method named forEach(). It is different from the basic loops as it calls a function once for each element present in an array.

Syntax

Its syntax is also different, look at the syntax of forEach() method:

Example

This example will show you how forEach() method works with array elements. Firstly the array concatenated with forEach() method will call user-defined function. Then this function will print traverse all array elements and display them on the web. See the code below:

Copy Code

     <script>
// declare an array and provide value in it 
var message = ["It", " is", " very", " beautiful", " day"]; 
var index = 0;

//call the user-defined function with array
message.forEach(traverseArray);

//definition of user-defined function
function traverseArray(ele, index)
{
    //display the array elements using index 
    document.write(ele);
}
</script>

    

Test it Now

Output

Save the code and execute it on the browser to show you all the array elements get printed on the web. See the below response:

It is very beautiful day

Screenshot

See the web screenshot for the above JavaScript code:

Traverse an array using every() method

This method is different from the basic loops and forEach() method. It is basically used to traverse an array along with some conditions specified by the programmer. The every() method is a JavaScript function to test the specified condition with all elements of the array.

It returns true if all elements satisfy the condition and pass the test (provided as a function). Otherwise, it returns false.

Syntax

Here is the syntax for every() method:

Example 1

In this example, we will traverse the whole array and check the given values are > 18 condition to verify whether all are adults or not. See the code below:

Copy Code

     <script> 
//define an array with elements
var age = [22, 28, 36, 26, 34, 31];
  
//put a condition to check all the values are greater then 18
const adult = x => x > 18; 
  
if (age.every(adult)) { 
    //display the message if all array values are > 18
    document.write('All are adults'); 
} 
else { 
    //display the message if any one of them is less than 18
    document.write('Atleast one is not adult'); 
} 
</script>

    

Test it Now

Output

Save the code and execute it on the browser, which will show you the response "All are adults" if all array values are > 18. Otherwise, it will display "Atleast one is not adult." See the below response:

Atleast one is not adult

Screenshot

See the web screenshot for the above JavaScript code:

Example 2

In this example, we will traverse the whole array to check that all the given values in the array are even numbers. For this we will put a condition check (even = x=> x%2 == 0). It will return true if all are even numbers; otherwise, it will return false. See the code below:

Copy Code

     <script> 
//define an array with elements
var age = [12, 47, 16, 26, 34, 59];
  
//put a condition to check all the values are greater than 18
const adult = x => x > 18; 
  
if (age.every(adult)) { 
    //display the message if all array values are > 18
    document.write('All are adults'); 
} 
else { 
    //display the message if any one of them is less than 18
    document.write('Atleast one is not adult'); 
} 
</script>

    

Test it Now

Output

Save the code and execute it on the browser that will show you the response "All are even numbers" if all array values are > 18. Otherwise, it will display "Atleast one of them is not an even number." See the below response:

Atleast of them is not an even number

Screenshot

See the web screenshot for the above JavaScript code:

Traverse an array using map

A map is a method provided by JavaScript programming language which applies a function over every element of the array and then returns a new array. In this way, it traverses the whole array.

You can also perform operations with array elements using this map() function while traversing the array. Basically, it traverses the whole array to perform some operations with each element of the array.

Syntax

Here is the syntax for the map() method of JavaScript:

It returns a newly created array.

Look at the below examples how map() is used:

Example 1

In this example, we will traverse the whole array using map() function of JavaScript to perform Math.sqrt() operation on array elements. See how it will be done with JavaScript methods:

Copy Code

     <h3> Perfrom sqrt on each element of array using map() </h3>
<script>
//initialize an array with value
var numbers1= [4, 16, 36, 64, 100, 144, 196, 256, 324, 400];

//call the user-defined function using map
var numbers2 = numbers1.map(myFunction);

//display the array elements before and after performing sqrt operation
document.write("Inital array elements: " + numbers1);
document.write("<br> <br>");
document.write("Array after sqrt: " + numbers2);

//function definition where perform sqrt on each element of array
function myFunction(value, index, array) {
  return Math.sqrt(value);
}
</script>

    

Test it Now

Output

Save the code and execute it on the browser, which will show you all the array elements before and after performing the sqrt operation. Here, the map() function will help to traverse each element of the array.

See the web screenshot for the above JavaScript code:

Example 2

You can also perform simple arithmetic operation using map(). See the below code given of the example:

Copy Code

     <h3> Perfrom addition on each element of array using map() </h3>
<script>
//initialize an array with value
var numberArray = [5, 9, 8, 2, 6];

//call the user-defined function using map
var numbers2 = numberArray.map(myFunction);

//display the array elements before and after performing operation
document.write("Inital array elements: " + numberArray);
document.write("<br><br>");
document.write("<b> Add 10 to each element of the array </b><br>");
document.write("Newly created array: " + numbers2);

//function definition where perform simple addition on each element of array
function myFunction(ele, index, array) {
  return ele + 10; 
}
</script>

    

Test it Now

Output

See the web output for the above code. It will return all the array elements by adding 10 to them.