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.

1
2

var array1 = []; //Method 1
var array2 = new Array(); //Method 2

Array Initialization

You can initialize an array in following ways.

• Initialization at the time of Declaration

1
2

var array1 = ["First", "Second", "Third", "Fourth"]; //Method 1
var array2 = new Array("First"); //Method 2

• Initialization after Declaration

1
2
3

//Declaration after Initialization
array1 = ["First", "Second", "Third", "Fourth"]; //Method 1
array2 = new Array("First"); //Method 2

Javascript Array Iteration Methods

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

1. Array.map()
2. Array.filter()
3. Array.forEach()
4. Array.reduce()
5. Array.reduceRight()
6. Array.some()
7. Array.every()
8. Array.find()
9. Array.findIndex()
10. Array.indexOf()
11. 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.

1
2
3
4
5

var numbers1 = [10, 20, 30, 40, 50];

var numbers3 = numbers1.map(function (value, index, array) {
  return value * 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

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.

1
2
3

var numbers3 = numbers1.map(function (value) {
  return value * 3;
});

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.

1
2
3
4
5

var numbers = [50, 25, 40, 16, 29];

var numOver30 = numbers.filter(function (value, index, array) {
  return value > 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

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.

1
2
3

var numOver30 = numbers.filter(function (value) {
  return value > 30;
});

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.

1
2
3
4
5
6

var prntVal = "";
var names = ["Frank", "Charles", "Dolly", "Robert", "Bob"];

names.forEach(function (value) {
  prntVal = prntVal + "Hello " + value + "<br/>";
});

Output

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.

1
2
3
4
5

var nums = [10, 20, 30, 40, 50];

var sum = nums.reduce(function (total, value) {
  return total + value;
});

Output

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

1
2
3

var sum = nums.reduce(function (total, value, index, array) {
  return total + value;
});

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.

1
2
3
4
5

var nums = [10, 20, 30, 40, 50];

var sum = nums.reduceRight(function (total, value) {
  return total + value;
});

Output

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.

1
2
3
4
5

var nums = [10, 20, 30, 40, 50];

var over30 = nums.some(function (value) {
  return value > 30;
});

Output

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.

1
2
3
4
5

var nums = [10, 20, 30, 40, 50];

var Allover30 = nums.every(function (value) {
  return value > 30;
});

Output

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.

1
2
3
4
5

var nums = [10, 20, 30, 40, 50];

var firstNum = nums.find(function (value) {
  return value > 30;
});

Output

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.

1
2
3
4
5

var nums = [10, 20, 30, 40, 50];

var findNumIndex = nums.findIndex(function (value) {
  return value > 30;
});

Output

10. Array.indexOf()

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

Example

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

1
2
3

var names = ["Frank", "Charles", "Dolly", "Robert", "Bob"];

var pos = names.indexOf("Dolly");

Output

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.

1
2
3

var names = ["Frank", "Charles", "Dolly", "Robert", "Bob"];

var pos = names.lastIndexOf("Charles");

Output

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