Most Important JavaScript Array Iteration Methods.

Hey 👋, Guys Welcome.

Today we are deeply learning about the most Important Array Iterations Methods in JavaScript

Let's Dive In ..

Others Programming Languages Such As C, C++, Python and C# .. have Arrays like Concepts and different Methods to Iterate the Arrays or List. In JavaScript there are Bulk of Iteration Methods for Arrays. Lets Uncover Them.

1.Foor Loop

let Array = [1, 2, 3, 4, "Zubair", "USA"];

for(let i=0 ; i<Array.length ; i++)
{
  console.log(Array[i]) // 1 2 3 4 Zubair USA
}

Here We Use a Variable i That Iterate through each Index and Then With the Array[i] we access each Element in That Array. The variable starts from 0 and ends upto less than the length (0-5) of Array.

2.For In

For In Loop is another way to loop through all Elements in Array. We Can also use this methods for objects.

let Array = [1, 2, 3, 4, "Zubair", "USA"];

for (const key in Array) {
  console.log(Array[key]) // 1 2 3 4 Zubair USA
}

With this method , we can also get the Each Index and Element of Array. This can also be used to iterate through keys and values of Object.

const person = {Name:"John Doe", Age:25};

for (let x in person) {
  console.log(`${x} : `,person[x]) //Name :  John Doe Age :  25
}

3.For Of

This Method also loops through all of the values of iterable Object such as Array , String etc. This Methods Does'nt work with Objects.

let Array = ["Zubair", "John", "Doe"];

for (const elemet of Array) {
  console.log(elemet) //Zubair John Doe
}

let Name="John";

for (const elemet of Name) {
  console.log(elemet)
}

In The Above Example , we have for of method applied to a string. This will iterate through each character in the string and display the result like that

J
o
h
n

4.While Loop

let Array = [23,34,45,67,78,89];

let I=0;

while(I<Array.length)
{
  console.log(Array[I]) // 23 34 45 67 78 89
  I++
}

This While Loop serves same as for loop. In Above Example While Loop Running until Value in I variable is less than the size of our Array.

5.For Each

The foreach() methods uses callback function that runs on each array element. The Callback takes the 3 arguments

1. Element
2. Index of Element
3. Array Itself

let Array = [23,34,45,67,78,89];
Array.forEach(Callback=(Element,Index,TempArray)=>
{
  console.log(Element) // 23 34 45 67 78 89
  console.log(Index)  // 0 1 2 3 4 5
  console.log(TempArray[Index]) // 23 34 45 67 78 89
})

As You Can see in the Callback Function we have our Three Arguments working on our Array.

6.Map Method

Map Methods also works similar to Foreach Method. This can also takes 3 argunent

let Array = [23,34,45,67,78,89];
Array.map(Callback=(Element,Index,TempArray)=>
{
  console.log(Element) // 23 34 45 67 78 89
  console.log(Index)  // 0 1 2 3 4 5
  console.log(TempArray[Index]) // 23 34 45 67 78 89
})

But If we return something from callback after performing some functionality, then map method creates new array ,See

let Array = [23,34,45,67,78,89];

let New=Array.map(Callback=(Element,Index,TempArray)=>
{
  return Element*2
})

console.log(New) // [ 46, 68, 90, 134, 156, 178 ]

7.Indexof

The Indexof Methods also iterates through each element of Array and return the index of specific element. If Element not Found , it returns -1

let Array = [23,34,45,67,78,89];

let Ind=Array.indexOf(67)

console.log(Ind) // 3

That's Enough for Today's Lesson.

Like , Comment and Share if you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡