Hi everyone!! In this blog we are going to look at the different types of array methods that are there in javascript.
In JavaScript, an array is a data structure that contains list of elements which store multiple values in a single variable. The strength of JavaScript arrays lies in the array methods. Array methods are built in functions in javascript. Each method has a unique function that performs a change or calculation to the array and saves our time from writing functions. These array methods in javascript makes a programmer life easier and more enjoyable.
So, here I'm going to use the same array for all the array methods in order for you all to get a better understanding of how every methods are different from each other.
const array = [
{ name : "apple" , quantity : 5 },
{ name : "orange" , quantity : 3 },
{ name : "mangoes" , quantity : 7 },
{ name : "banana" , quantity : 12 },
{ name : "strawberry" , quantity : 15 },
{ name : "watermelons" , quantity : 1 },
{ name : "grapes" , quantity : 8 },
]
1. filter() method
The filter() method creates a new array and checks whether a given element in that array satisfies a given condition.
Syntax :
a. filter((element) => { ... } )
b. filter((element, index) => { ... } )
c. filter((element, index, array) => { ... } )
Now in the given array above , if I have to find the name of the elements in the array whose quantity is less than 10.
const filteredArray = array.filter((item) => item.quantity < 10)
// output : [{ name : "apple" , quantity : 5 },{ name : "orange" , quantity : 3 },{ name : "mangoes" , quantity : 7 },{ name : "watermelons" , quantity : 1 },{ name : "grapes" , quantity : 8 }]
filter() method returns a new array. Length of the new array will not be same as compared to the original array.
2.map() method
map() allows us to take one array and convert it into a new array, so all the items in the array will be slightly different from one another.
Syntax :
a. map((element) => { ... } )
b. map((element, index) => { ... } )
c. map((element, index, array) => { ... } )
Like if we want all the names of fruits or quantity in the array given
const itemsInArray = array.map(item => item.name)
// output : ["apple", "orange", "mangoes", "banana", "strawberry", "watermelons", "grapes"]
map() also returns a new array. Length of the new array will always be same as compared to the original array.
3.find() method
find() method allows us to find single element in an array. It returns the first element that matches the test condition in the filter method. If nothing satisfies the given condition then it returns undefined.
Syntax :
a. find((element) => { ... } )
b. find((element, index) => { ... } )
c. find((element, index, array) => { ... } )
If we want to find the element in the array whose quantity is equal to 15.
const foundedItems = array.find(item => item.quantity === 15)
// output : { name : "strawberry" , quantity : 15 }
4. forEach() method
forEach() method unlike all the previous method does not return anything. It works same way as a for loop.
Syntax :
a. forEach((element) => { ... } )
b. forEach((element, index) => { ... } )
c. forEach((element, index, array) => { ... } )
array.forEach(item => console.log(item.name))
//output : apple orange mangoes banana strawberry watermelons grapes
5. some() method
some()methods checks whether any one of the elements in the given array passes the test condition given by the function. If, yes then it returns true else false. It does not modify the original array.
Syntax :
a. some((element) => { ... } )
b. some((element, index) => { ... } )
c. some((element, index, array) => { ... } )
Suppose in the above we want to check whether any element in the array has quantity less than 1
const checkSomeItems = array.some(item => item.quantity < 1)
// output : false
If any one element in the array has satisfied the condition then it would return true or false for that whole array.
6. every() method
every() method is very much similar to some but only difference is that it checks for every elements in the array.
Syntax :
a. every((element) => { ... } )
b. every((element, index) => { ... } )
c. every((element, index, array) => { ... } )
const checkEveryItems = array.every(item => item.quantity <= 15)
// output : true
7. reduce() method
reduce() method executes a function on each element of the array and return a single value.
Syntax :
a. reduce((accumulator, currentValue) => { ... } )
b. reduce((accumulator, currentValue, index) => { ... } )
c. reduce((accumulator, currentValue, index, array) => { ... } )
d. reduce((accumulator, currentValue, index, array) => { ... }, initialValue)
reduce() takes two parameters first is accumulator that stores the total after each iteration of the array and the second parameter currentValue stores the current value in the array.
Suppose here we want to calculate the total quantity in the array
const total = array.reduce((accumulator, currentValue) => {
return currentValue.quantity + accumulator
}, 0 )
//output : 51
Here 0 is the initialValue. For the first iteration the value in the accumulator would be 0. In the next iteration the value in the accumulator will be the return from the previous iteration.
So , here I tried to list down all the important array methods that I know. Thanks for reading this blog. Hope it helped you gain some valuable insights from it.
Have good day :)