JavaScript Array Iteration Methods

In the last tutorial, we discussed JavaScript array sorting methods and find the minimum and maximum values from an array. In this tutorial, we will learn about different array techniques and methods to iterate over every array item.

Array forEach() method

The ``` forEach() ``` mehod is used to call a function on every element or value of the array. And it returns nothing it just call the function for every array value. syntax

`array.forEach(function_name)`
Example
```<script>
let prices =[12, 32, 10, 55, 100, 102];
var taxes = []
{
value += value*0.07;
taxes.push(value)
}
console.log("prices: "+prices);
console.log("taxes: "+taxes);
</script>```
Output
`prices: 12,32,10,55,100,102`
`taxes: 12.84,34.24,10.7,58.85,107,109.14`

Behind the code In the above example the ``` prices.forEach(add_tax); ``` statement call the ``` add_tax() ``` function for every ``` prices ``` value. In the ``` add_tax(value, index, array) ``` function we defined 3 parameters

• ``` value ```
• ``` index ```
• ``` array ```

The ``` value ``` represent the individual array value. The ``` index ``` represent the index number of the value. The ``` array ``` represent the complete array itself. And all these three values get automatically assigned when we call the forEach() method on an array.

Array map() method

The ``` map() ``` method is similar to the ``` forEach() ``` method the only difference is the ``` map() ``` method returns the array so the function that ``` map() ``` method is supposed to call for every array element must have a ``` return ``` statement.

syntax

`new_array = array_name.map(function_name)`

Example

```<script>
let prices =[12, 32, 10, 55, 100, 102];

var taxes = prices.map(add_tax);  //return the array

{
value += value*0.07;
return value;
}
console.log("prices: "+prices);

console.log("taxes: "+taxes);
</script>```

Output

```prices: 12,32,10,55,100,102
taxes: 12.84,34.24,10.7,58.85,107,109.14```

Array filter method

As the name suggests the filter() method is used to filter out the elements from the array that does not pass the test. The ``` filter() ``` method filter the array based on the passed function. And if the function returns ``` true ``` the filter function keep the array value else it omits the value. The filter method does not make any changes in the actual array instead it creates a copy of the array. syntax

`filter_array = array_name.filter(function_name)`

Example

```<script>
let ages = [12, 16, 17, 19, 20, 14, 25];
{
if(value >=18)
{
return true;
}
else
{
return false;
}
}
console.log("All ages: "+ages);

</script>```
Output
```All ages: 12,16,17,19,20,14,25

Array reduce() method

The ``` reduce() ``` method is used to simplify the complete array into a single value. Similar to all the methods we discussed so far in this tutorial reduce also apply the function on every array element and return a single value result. It does not change the actual array or reduce it instead it creates a copy of the array and reduces it to the specified function. syntax

`new_value  = array_name.reduce(function_name, initial_value)`

The reduce function can accept two arguments, the first must be the function, and the second is optional which represents the initial value for the first execution of the reduce method. Example

```<script>
let prices =[12, 32, 10, 55, 100, 102];
let total_bill = prices.reduce(sum, 0);

function sum(pre_value, cur_value, index, array)
{
return pre_value+cur_value;
}
console.log("prices: "+prices);
console.log("total bill: "+total_bill);
</script>```

O utput

```prices: 12,32,10,55,100,102
total bill: 311```

Behind the code In the above example, we have used the ``` reduce() ``` method to sum up all the elements present in the ``` prices ``` array. ``` prices.reduce(sum, 0); ``` statement specifies that call the sum() function for every element of prices with initial value ``` 0 ``` . In the ``` sum(pre_value, cur_value, index, array) ``` function we have specified 4 arguments, which automatically get assigned when called by ``` reduce() ``` method.

• ``` pre_value ``` argument specifies the previous value of the array.
• The ``` cur_value ``` argument specifies the current value of the array.
• The ``` index ``` argument Specifies the index number of the current value.
• The ``` array ``` represents the prices array itself.

Similar to the ``` reduce() ``` method we have ``` reduceRight() ``` method which reduces the array element into a single value from right to left, whereas the ``` reduce() ``` method reads the array from left to right.

Array every() method

The ``` every() ``` method is used to check if all the elements of the array pass the test based on a function. And it returns ``` true ``` if all the elements pass the test else it returns ``` false ``` . syntax

`array_name.every(function_name)`

Example

```<script>

let ages = [12, 16, 17, 19, 20, 14, 25];
let only_over10 = ages.every(is_over10);

{
if(value > 18)
{
return true;
}
}
function is_over10(value, index, array)
{
if(value > 10)
{
return true;
}
}
console.log("All ages: "+ages);
console.log("Are all over 10? "+only_over10);
</script>```

Output

```All ages: 12,16,17,19,20,14,25
Are all over 10? true```

Array some() method

The some() method is used to check if any of the array elements pass the test. It returns ``` true ``` if any one of the arrays passes the function test, else it returns ``` false ``` . syntax

`array_name.some(function_name)`

Example

```<script>
let ages = [12, 16, 17, 19, 20, 14, 25];
{
if(value > 18)
{
return true;
}
}
console.log("All ages: "+ages);
</script>```
Output
```All ages: 12,16,17,19,20,14,25
```

Summary

• The ``` forEach() ``` method calls the specified function for every element of the array.
• The ``` map() ``` method also calls the specified function for every element of the array but it returns a new array.
• The ``` filter() ``` method is used to filter the array elements based on the function test.
• The ``` reduce() ``` method is used to wrap up the complete array into a single value.
• The ``` every() ``` method is used to check if all the elements of the array pass the test.
• The ``` some() ``` method is used to check if a single element of the array can pass the test.