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

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

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

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

Output

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

34
67
12
89
45
79

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

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

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

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

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

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

Output

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