Most Important JavaScript Array Iteration Methods.
Tags: javascript, webdev, beginners, programming
Published: 2022-09-08 04:50:14

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

```javascript
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.

```javascript
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.

```javascript
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.

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

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

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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

```javascript
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 !! ⚡