Javascript

Author: zeptobook.com Published: 2024-07-20

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

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

var array1  First Second Third Fourth Method 1 var array2  new Array First Method 2

Initialization after Declaration

Declaration after Initialization array1  First Second Third Fourth Method 1 array2  new Array First Method 2

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

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

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

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

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

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

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

var prntVal   var names  Frank Charles Dolly Robert Bob  names forEach function value  prntVal  prntVal  Hello   value   br

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

var nums  10 20 30 40 50 var sum  nums reduce function total value  return total  value

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

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

var nums  10 20 30 40 50 var sum  nums reduceRight function total value  return total  value

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

var nums  10 20 30 40 50 var over30  nums some function value  return value  30

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

var nums  10 20 30 40 50 var Allover30  nums every function value  return value  30

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

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

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

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

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

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 orgenUSsearchqarray