Array Method You must know
Array is one of the most commonly used data structures. arrays can store multiple values of different datatypes its allow you to manage and modify data easily.
Most commonly used methods for array are listed below:
push()
pop()
shift()
unshift()
filter()
reduce()
foreach()
push() - Add elements at the end
The push() method is used to add one or more element at the end of the array its modify the original array and return the new length of the array .
Examples 1:
output : [ 'car', 'cat', 'dog', 'rabbit' ]
Example 2:
when we directly log arr.push("rabbit") , its return the updated length of the array instead of the updated array
output : 4
if you wants to return the new updated array use, console.log(arr) instead of the console.log("rabbit")
pop() -Remove element from the end
The pop() method is used to remove the last element from the array. Its modifies the original array and returns the removed element.
Example :
If you directly log the arr.pop() this will return the removed element from the array .
output: dog
if you want to return the updated array after pop() operation use console.log(arr) to get the updated array.
shift() - Remove first element
The shift() method is used to remove the first element from the array. Its modifies the original array and returns the removed element.(Its same as pop() but pop is used to remove from last).
The shift() method shift all the values to the left by 1 and decrement the length of the array by 1 . If array is empty and you apply arr.shift() its will return undefined.
Example :
output : 12
[ 4, 3, 5, 34
unshift() - Add element at the Begining
The unshift() method is used to add one or more elements to the begining of an array. Its modifies the original array and return the new length of the array .
Example :
output: 7
[ 24, 5, 12, 4, 3, 5, 34 ]
filter() - Create the filtered Array
The filter() method creates the new array containing the elements that satisfy a given condition. It does not modified the original array .
Syntax:
array.filter(function(element, index, array) {
return condition;
});
Parameters:
element : current element being processed.
index(optional) : Index of the current element.
array(optional) : The original array.
The function must return true or false:
if true ---> element is included in the array.
if false ---> element is excluded.
Example :
output: [ 2, 4, 6, 8 ]
reduce() -Reduce Array to a single value
The reduce() method reduces the array to a single value and does not modify the original array.
That single value can be :
- A Number
- A String
-An object
- Another array
- Even a grouped structure
Syntax:
array.reduce( function(accumulator , currentValue, index, array)=>{ return updatedAccumulator; },initialValue);
Understanding of parameters:
accumulator(acc) :stores the result of the previous iterations
currentValue : current element being processed.
index (optional) : index of the currentValue (current Index)
array (optional) : Original array
initialValue : starting value of accumulator
Example : sum of number
output :20
lets understand the reduce through dry run how internally its working
| Iteration | acc | current | Result |
|---|---|---|---|
| 1 | 0 | 2 | 2 |
| 2 | 2 | 4 | 6 |
| 3 | 6 | 5 | 11 |
| 4 | 11 | 8 | 19 |
| 5 | 19 | 1 | 20 |
Initially the initialValue =0 which means accumulator is initialize with this initialValue and every time the callbackFn is call the return value in every call is updated in the accumulator and the final callbackFn call return value is the final result.
But if the initial value is not specified then the accumulator is initialized to the first value of an array and callbackFn starts executing from the second value in the array as the current value .
If the array is empty then there is no value to assign to the accumulator in this case an error will occur
Example : Maximum Number
output : 8
Here we compare each element and keep the largest value in the accumulator.
foreach() - Loop through an Array
foreach() is an iterative methods used to iterate through each elements of an array at least once. For each element the provided callbackFn is called at least once . Its does not return any new array its just simply perform some action to each element of an array. if you returning the foreach() it will return undefined.
Syntax:
array.foreach(function(element , index, array){ // code to execute
});
parameters:
element : the current value being processed
index(optional) : index of the current element
array(optional): original array
Example 1: Printing values
output :1234
Example 2: Using index
output :
0 : apple
1 : banana
2 : mango
Example 3: Modifying Array values
output: [ 2, 4, 6, 8, 10 ]
------------------------------------------------------------------------------Thanks for reading❤️
