# Array Methods You Must Know

There are various methods that comes along with the array object. There are some methds which mutates or changes the original array, and some do not.

## Array Manipulation Methods

### push() and pop()

![](https://cdn.hashnode.com/uploads/covers/6969157de175d100faf5be39/a940a5c1-c88a-40a5-a2b3-bf4c3f110d94.png align="center")

1.  **push** : It is used to add element from the last. It mutates the original array.
    

```javascript
const num = [1, 2, 3];
num.push(4);
console.log(num); //num = [1, 2, 3, 4]
```

**2\. pop** : It is used to remove element from the last. It mutates the original array.

```javascript
const num = [1, 2, 3, 4];
num.pop();
console.log(num); //[1, 2, 3]
```

### shift() and unshift()

![](https://cdn.hashnode.com/uploads/covers/6969157de175d100faf5be39/33b7c4c6-2a61-4530-9a76-6f90fb8d90b2.png align="center")

Trick to remember shift and unshift :

> shift ---> shifting out from the list (deleting)
> 
> unshift ----> opposite of shift (adding)

1.  **shift** : It is used to remove the first element of the array. It mutates the original array.
    
2.  **unshift** : It is used to add elements at the beginning of the array. It mutates the original array.
    

```javascript
const num = [1,2,3,4];

//adding 0 to the start - shift
num.unshift(0);
console.log(num);

//removing first element - unshift
num.shift();
console.log(num);
```

## Iterative Methods

### forEach()

It is an higher order function which loops over all the elements of the array one by one and calls our callback for each element.

*   It do not mutates the original array.
    
*   It takes callback function as argument.
    
*   It returns undefined.
    
*   `forEach()` expects a synchronous function — it does not wait for promises.
    
*   There is no way to stop or break a `forEach()` loop other than by throwing an exception.
    

```javascript
let order = ['milk', 'burger', 'pizza', 'coke'];

order.forEach(item => console.log(item));
```

### map()

![](https://cdn.hashnode.com/uploads/covers/6969157de175d100faf5be39/56fa2f10-2286-492a-9327-c9deec5a5537.png align="center")

It is a higher order function which is used to transform the array elements. It loop over all the elements of the array one by one and calls our callback function with that element, and pushes the return value from our callback function to the new array.

*   It do not mutates the original array.
    
*   It takes callback as argument.
    
*   It returns new array.
    
*   **Example** - I want to add 5 rupees tax to each amount in the array.
    

```javascript
let bills = [100, 200, 300, 400];

let taxedBills = bills.map(bill => bill + 5);

console.log(taxedBills );
```

### filter()

![](https://cdn.hashnode.com/uploads/covers/6969157de175d100faf5be39/8e355293-d56f-4984-8dcc-5aedafb43577.png align="center")

It is a higher order function which is used to filter out the elements from the array. It loop over all the elements of the array and calls our callback function with that element and if the return value of our callback is true, then it pushes the element in the new array otherwise rejects.

*   It takes callback as an argument
    
*   It always returns an array
    
*   **Example -** I want to filter out those students whose percentage is less than 33.
    

```javascript
const students = [
  { name: "Aman", percentage: 78 },
  { name: "Riya", percentage: 92 },
  { name: "Karan", percentage: 28 }, // fail
  { name: "Neha", percentage: 65 },
  { name: "Rohit", percentage: 31 }, // fail
  { name: "Priya", percentage: 54 },
  { name: "Arjun", percentage: 22 }, // fail
  { name: "Sneha", percentage: 47 }
];

const failedStudents = students.filter(student => {
    return student.percentage < 33;
})

//one liner
//const failedStudents = students.filter(student => student.percentage < 33);

console.log(failedStudents);
```

### reduce()

![](https://cdn.hashnode.com/uploads/covers/6969157de175d100faf5be39/fc3b388b-d800-42d3-9de3-a7c8d6cd57c3.png align="center")

It is a higher order function which is used to reduce whole array into a single value. It loop over all the elements and call our callback one by one for each element.

**Syntax**

```javascript
[].reduce((previous, current) => {
    //body
    //return statement
}, initialValue)
```

*   **previous** - previous iteration callback return value
    
*   **current** - It is a current element value
    
*   **initialValue** - It is used as the initial value for the very first time. It can be of any datatype like number, string, object, array etc.
    

**Initial Iteration**

When the reduce calls our callback for the very first time, then it call with the initial value passed as argument and first element of the array.

**Further Iterations**

When the reduce calls our callback after first time, it calls with the previous callback returned value and the next element of the array and so on.

**Example**

I need to calculate the total amount of the items in the cart.

```javascript
const cartItems = [
  { name: "Laptop", price: 55000 },
  { name: "Mouse", price: 599 },
  { name: "Keyboard", price: 1499 },
  { name: "Headphones", price: 1999 },
  { name: "Monitor", price: 12000 }
];

const total = cartItems.reduce((previous, current) => {
    return previous + current.price;
}, 0);

//one liner
//const total = cartItems.reduce((previous, current.price) => previous + current, 0);

console.log(total);
```

## Removing Element from array methods

*   Splice(startIndex, elementsCountToRemove) \[Mutates original array\]
    
*   Filter(callback) \[Immutable method\]
    
*   pop and shift \[mutates original array\] - It only removes first or last element.
    

## Cloning an array

### Shallow Copy

*   spread operator
    

### Deep copy

*   structuredClone()