In day to day programming in Javascript, we need to perform some kind of operation on array elements. It is very common to process each item of an array. So, in order to make processing of each array element easier and efficient, Javascript uses power of Iteration methods.

Iteration Methods

Iteration methods are the methods that operate on every element in an array, one in a time. These methods resembles with loop. In this tutorial, we will learn about how to use iteration methods to loop through array, perform some function on each item in an array, filter the desired results of an array, reduce array items to a single value, and search through arrays to find values or indices.

Brief Overview of Array in Javascript?

An array is a special kind of variable, which is used to store more than one value at a time. OR you can say, array can store list of an items. All items in an array are marked by their index position. You can access any element of an array using their index position.

Array Declaration

Let’s see how to declare an array in Javascript. There are two ways of declaring an array.

Array Initialization

You can initialize an array in following ways.

Initialization at the time of Declaration

Initialization after Declaration

Javascript Array Iteration Methods

Javascript array iteration methods are operated on each and every element of an array.

We are going to learn eleven ways of Javascript array methods. These methods are:

Array.map() Array.filter() Array.forEach() Array.reduce() Array.reduceRight() Array.some() Array.every() Array.find() Array.findIndex() Array.indexOf() Array.lastIndexOf()

Let’s start with exploring each of Iteration method.

1. Array.map()

By using Array.map() , you can create a new array element by performing some operation on each array element. There is no change in the original array elements.

Example

Let’s create a new array by multiplying the original array elements by 3.

Here, we have created another array named number3, and apply map() function on the number1 array. Now, map() method will multiply each array element by 3, and return the result in the number3 array. See the below output of number3 array.

Output

30,60,90,120,150

There are 3 parameters passed in callback function. These are: value , index and array . You can omit index and array parameter, and can pass just value parameter.

2. Array.filter()

Array.filter() , as the name suggests, you can create a new array based upon some filter condition.

Example

Let’s create a new array using the condition or filter that, it should be greater than 30.

Here, we have an array of numbers . We have created a new array numOver30 , using the condition, where value is greater than 30. So, numOver30 array will contains those elements, which pass this condition.

Output

50,40

There are 3 parameters passed in callback function. These are: value , index and array . You can omit index and array parameter, and can pass just value parameter.



3. Array.forEach()

Array.forEach() is just like for loop. It runs a function for each element of an array.

Example

Let’s take an array of string. This array will contains names of person. Using Array.forEach(), we will append Hello word with each person name.

Output

Hello Frank Hello Charles Hello Dolly Hello Robert Hello Bob

4. Array.reduce()

Array.reduce() method runs function on each array element to produce a single value. Array.reduce() works from left-to-right in an array.

Example

Let’s create an array, and find out the sum of an array elements using the reduce() function.

Output

150

Note: It has same three parameters of value , index and array along with a new parameter total , which is used for maintaining initial value or previously returned value.

So, the actual callback function signature was like this. In above code, I omitted the index and array parameters.

5. Array.redcueRight()

Array.reduceRight() is similar to reduce() function, except it start from right-to-left .

Example

We can use the same example with reduceRight() function. It will produce the same output.

Output

150

6. Array.some()

Array.some() can be used to determine whether some of the array element is passing the condition.

Example

In this example, we are going to check whether our array has some elements which is over 30. If it met the condition, it will return true, else return false.

Output

true

7. Array.every()

Unlike Array.some() , it checks whether all array element is passing the condition.

Example

Using the above example, we are going to use it with every() function, and check whether all elements is over 30. If it met the condition, it will return true, else return false.

Output

false

8. Array.find()

Array.find() method returns the value of the first array element that satisfy the given condition.

Example

In this example, we will try to find value greater than 30 in the given array. It will give the first greater value, which is 40 from the array.

Output

40

9. Array.findIndex()

Array.findIndex() returns the index of the first array element that satisfy the given condition.

Example

We are going to modify above example. Replacing find() with findIndex() will return the index of the first array element, which is greater than 30.

Output

3

10. Array.indexOf()

Array.indexOf() is used to search an element within an array and return its position.

Note: Elements within an array start with position 0, then next element with position 1 and so on.

Example

Let’s find the position of person Dolly in our array.

Output

2

Array.indexOf() return the position of an array element. If an element is not found, it will return the -1.

Also, it returns the first occurrence of founded element.

11. Array.lastIndexOf()

Like Array.indexOf() , it searches the element from the end of the array.

Example

Let’s find the position of person Charles in our array.

Output

1

Summary

In this blog, we learned about different types of Javascript Array Iterations. These iterations are really useful in day to day programming. You can perform lot of operations using these iterations.

Reference

https://developer.mozilla.org/en-US/search?q=array

Further Reading

Pipes in Angular

Share data between components in Angular

Custom Directives in Angular 7

Like this: Like Loading...