# Array Methods You Must know

As you all know, array are the most used and the fundamental topics in Javascript. Array is used to store data, this data can be of any datatype strings, boolean, number, objects anything. Since arrays are used to store data, we sometime need to perform some operations on it, one way to do it is to make function and code according to your need so that you can perform the required operation on the array data.

Here in JS environment arrays have their own class. Whenever, a new array is created Array class methods get attached to that array. So, we automatically get some pre-written functions/methods with that array. Now, we're are going to discuss some of those methods in this article, so that you can understand the working and implementation part of those methods.

## Methods for Basic Array Operations

### push()

As the name suggest this method is used to push data into array. If we want to insert any data in the array we can use this method. This method insert the data at the very end of an array

**Parameters:** You have to pass the element(s) which you want to add to the array

**Returns:** This method returns the length of the array after pushing the element.

```javascript
const countries = ["India", "Brazil", "Russia"];
const pushingNewCountry = countries.push("USA");
console.log(pushingNewCountry);
console.log(countries);
--------------------------------------------------------------------
OUTPUT:
4
[ 'India', 'Brazil', 'Russia', 'USA' ]
```

### pop()

This method is used for removing element from array. It removes the last element of array.

**Parameters:** This method not take any parameter.

**Returns:** The element which is removed from the array. If array is empty it returns undefined

```javascript
const countries = [ 'India', 'Brazil', 'Russia', 'USA' ];
const removingLastCountry = countries.pop();
console.log(removingLastCountry);
console.log(countries);
--------------------------------------------------------------------
OUTPUT:
USA
[ 'India', 'Brazil', 'Russia' ]
```

### unshift()

This method is also used for inserting elements into the array. It insert the element at the very beginning of an array.

**Parameters:** You have to pass the element(s) which you want to add to the array.

**Returns:** This method returns the length of the array after inserting the element.

```javascript
const countries = [ 'India', 'Brazil', 'Russia' ]
const unshifting = countries.unshift("Greece");
console.log(unshifting);
console.log(countries);
--------------------------------------------------------------------
OUTPUT:
4
[ 'Greece', 'India', 'Brazil', 'Russia' ]
```

### shift()

This method removes element from the array. It removes the first element of the array.

**Parameters**: This method not take any parameter.

**Returns:** The element which is removed from the array. If array is empty it returns undefined.

```javascript
const countries = [ 'Greece', 'India', 'Brazil', 'Russia' ]
const shifting = countries.shift();
console.log(shifting);
console.log(countries);
--------------------------------------------------------------------
OUTPUT:
Greece
[ 'India', 'Brazil', 'Russia' ]
```

* * *

## Iterative Methods of Array

### map()

This method iterate over the array, takes each element of the array runs the callbackfn with that element and return the final value in the new array.

**Parameters:** map takes a callbackfn as a parameter.

**Callbackfn:** This callbackfn is called with three arguments. Element, index, array. Element, index are the values containing element and index of element, of the array in that iteration.

**Returns:** This method return new array with all the values which are returned by the callbackfn.

```javascript
const arr = [1,2,3,4];
const double = arr.map((element) => {
        return element*2;
    })
console.log("arr:",arr)
console.log("double:",double)

--------------------------------------------------------------------
OUTPUT:
arr: [ 1, 2, 3, 4 ]
double: [ 2, 4, 6, 8 ]
```

### filter()

This method also iterate over the array and take a callbackfn as a parameter. Callbackfn runs the code for each element, if the callback return true for that element that element is inserted into new array.

**Parameters:** filter takes a callbackfn as a parameter.

**Callbackfn:** This callbackfn is called with three arguments. Element, index, array. Element, index are the values containing element and index of element, of the array in that iteration.

**Return:** This method return new array with all the values for whom the callbackfn returned true.

```javascript
const arr = [3,6,9,12,15,18];
const greaterThanTen = arr.filter((element) => {
        return element > 10
    })
console.log("arr:", arr);
console.log("greaterThanTen:",greaterThanTen);

--------------------------------------------------------------------
OUTPUT:
arr: [ 3, 6, 9, 12, 15, 18 ]
greaterThanTen: [ 12, 15, 18 ]
```

### reduce()

This method is used for reducing. You will give input of array with many elements and it will give you a single value as output.

Parameters: This method takes 2 parameters, first is the callbackfn and second is initial value (optional).

Callbackfn: This callbackfn is called with 4 parameters, accumulator, currentValue, currentIndex, array. but generally we use only first two.  
Now in every iteration currentValue have the value of element of the array and accumulator accumulates the value returned in previous iteration.

Returns: The value which was accumulator after the last iteration is returned.

```javascript
const arr = [1,2,3,4,5];
const sumOfArray = arr.reduce((accumulator, currentValue) => {
        const sumInThisIteration = accumulator + currentValue;
        return sumInThisIteration;
    })
console.log("arr:", arr);
console.log("sum:", sumOfArray)

--------------------------------------------------------------------
OUTPUT:
arr: [ 1, 2, 3, 4, 5 ]
sum: 15
```

|  | accumulator | currentValue | return (accumulator + currentValue) |
| --- | --- | --- | --- |
| First iteration | 1 | 2 | 3 |
| Second iteration | 3 | 3 | 6 |
| Third iteration | 6 | 4 | 10 |
| Fourth iteration | 10 | 5 | 15 |

* * *

## Conclusion

JavaScript array methods make it much easier to work with collections of data. Methods like `push()`, `pop()`, `shift()`, and `unshift()` help manage array elements, while `map()`, `filter()` and`reduce()` allow us to process and transform data efficiently. Understanding these methods will help you write cleaner, more readable, and more powerful JavaScript code.