# 08 Array Methods You Must Know

In this blog we are going to cover the important methods that are there in the array , in JS arrays are having some inbuilt methods which are very helpful and frequently used like push() , pop() , shift() , unshift(), map() and much more.

So in this blog what we are going to do is first we will understand the definition of the method and then we will see some examples of it, so let's proceed with the same

### push & pop

these methods are used to add or remove the element from the end of the array.

*   **push** → Insert the element on the end of array
    
*   **pop** → remove the element from the end of array
    

Example :

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/449a5c75-f656-4460-a344-46dd29a77fdb.png align="center")

### shift & unshift

these methods are just opposite of the push and pop , here instead of the end we are inserting and removing the element from the front of the array.

*   shift → used to remove the element from the begnning
    
*   unshift → used to insert the element in the beginning of the array
    

Example :

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/e898ebaa-1642-471d-83cc-9e50ae06e26f.png align="center")

### Map

map is the method in the array which is used in such case when we want to perform some operations on the each element of the array , Suppose you have an array of numbers and you want to increment each value by 10 , then in this case you can use the map to perform your task easily, <mark class="bg-yellow-200 dark:bg-yellow-500/30">one thing that we have to keep in mind is map return new array and doesnot modify the original array.</mark>

Syntax of map functions : basically it runs an callback function to modify the values

```javascript
array.map(callback(element, index, array), thisArg)
```

As you can see the callback function requires 3 parameters

1.  element - The current element being processed in the array
    
2.  index(optional) - The index of the current element being processed in the array.
    
3.  array(optional) - The array `map()` was called upon.
    

apart from these parameter one more thing is there that is `thisArg` which is a value to use as `this` when executing `callbackFn.`

Example:

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/1e68a329-2253-4c10-85ea-12e6f2ac3832.png align="center")

let's take one example of `thisArg` as well

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/f509390e-4247-4a78-bbbf-be3b0fdd2b13.png align="center")

*   Look at the above example , what i have done is i have created one object `myObj` and inside that i have one key `value: 10` , then I have used map and on the parameter of the map i have passed the object `myObj` and inside function I have accessed the value using `this` keyword, and as a result our array gets modified to new array.
    

### Filter

filter is the method which is used to filter out the required value from the array , as the name itself is defining, it also takes callback function as an argument , and that callback function returns the boolean value, if the element is there it should returns true means the element should be included in the new filtered array , otherwise it should return false means the element will be excluded , and <mark class="bg-yellow-200 dark:bg-yellow-500/30">one thing that we have to keep in mind is </mark> `filter()` <mark class="bg-yellow-200 dark:bg-yellow-500/30"> return a new array which includes the filtered element</mark>

```javascript
array.filter(callback(element, index, array))
```

key point -

*   it returns new array
    
*   if callback return true - include the value
    
*   if callback return false - exclude the value
    

Example:

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/c469b044-f291-4bb7-b73d-258cfd708fda.png align="center")

*   Look at the above example , i have taken one array of numbers and I am filtering out those numbers which are divisible by 2 and hence you can see the results , i got the numbers which are divisible by 2. ( \[2, 4 , 6\] here)
    

### reduce

as the name suggests , this method is used to reduce an array into single value. like calculating sum, product etc.

```javascript
array.reduce(callback(accumulator, currentValue, index, array), initialValue)
```

key points -

*   accumulator → it stores the value of previous iteration.
    
*   currentValue →current element
    
*   initialValue → it stores the initial value of the accumulator
    

Example:

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/20ba70c4-8c56-48c2-b942-92696c560c3b.png align="center")

Exaplaination →

*   acc = 1 → 1\*1 = 1 → 1\*2 = 2 → 2\*3 = 6 → 6\*4 = 24 → 24\*5 = 120 → 120\*6 = 720
    
*   result = 720
    

### forEach

this method is used to iterate over the array and alow us to perform some operation, it also takes callback function as a argument, main thing to keep in mind it doesnot return new array instead it mutates the original array.

Example :

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/0b003400-038d-498a-b2dd-95a415de54e1.png align="center")

### Conclusion :

In this post we've looked at some of the most commonly used array operations in JavaScript , how to add and remove elements at the end (push, pop) and at the beginning (shift, unshift), and how to transform arrays element-by-element with map. These methods form the foundation for manipulating collections and are essential in everyday JS programming.

* * *

Hope you found it useful❤️