Abhay_Blogs
Traversal through the array made simple.

Traversal through the array made simple.

abhay Patil's photo
abhay Patil
·

3 min read

In this blog I will cover how to traverse through the array using for in, for of and for each in Javascript, so let's jump on to the topic!!

This blog covers topic like -

  1. for..in loop. 2.for..of loop. 3.forEach method.

Let's see we used to traverse through the array using the for loop,

const arr1  =  ['mon', 'tue', 'thur', 'fri'];

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

This gives us all the elements present in the array.

For in loop This loop iterates over the array and gives the index of each element in the array

const arr1  =  ['mon', 'tue', 'thur', 'fri'];

for(let element in arr1){

 console.log(element)
}

expected output - 0 1 2 3

This comes with the caution that it is not recommended to use with array where index position is important.

For of loop This loop iterates over the array and gives all elements of the array as well as it can be used to loop over the string methods we will see this in action with examples!

const arr1  =  ['mon', 'tue', 'thur', 'fri'];

for(let elements of arr1){
 console.log(arr1);
}

expected output - mon, tue , thru, fri

Iterating over a String

const country = 'Italy';

for(let val of country){

console.log(val)
}

expected output - 'I', 't', 'a', 'l', 'y'

Now, here comes the most important method of Array traversal,i.e For Each method let's understand how it is different from for in and for of loop and how it's used.

forEach The forEach() method is one of the ways to traverse through the array, but how is it different from for, for in and for of loop?

The main difference is that it executes a callback function with three parameters for each element in the array.

The parameters are -

  1. current value(required) - This gives us the value of the current array element.

2.index(optional)- This gives us the index of the current array element.

3.array(optional) - This gives us the whole array.

Let's understand these parameters step by step

1.First you will need a call back function with forEach.

arr1.forEach(function() {

})
  1. Next it will need at least one parameter to iterate that will be the current value.
arr1.forEach(function(current val){

console.log(current val)
})

Expected output - mon, tue , thru, fri

Now let's look at the optional parameters

1.index(optional) This gives us the index of the current element.

const arr1  =  ['mon', 'tue','thur', 'fri'];

arr1.forEach(function(element, index) {

    console.log(`the name is ${element} and index is ${index} `);
})

Expected output -
the name is mon and index is 0 
the name is tue and the index is 1  
the name is thur and index is 2 
the name is fri and index is 3
  1. array(optional)- This gives us the whole array of elements.
const arr1  =  ['mon', 'tue','thur', 'fri'];

arr1.forEach(function(element, index, array) {

    console.log(`the name is ${element} and index is ${index}  and the array is ${array}`);
})

Expected output -
the name is mon and index is 0 and array is mon,tue,thur,fri 
the name is tue and index is 1 and array is mon,tue,thur,fri 
the name is thur and index is 2 and array is mon,tue,thur,fri
the name is fri and index is 3 and array is mon,tue,thur,fri

We can say that forEach() is the combination of both for ..in and for..of loop

Hope you have understood these concepts and do follow my blogs.

JavaScriptDeveloperProgramming Blogs