# Array Methods You Must Know

Hey there , in this article we would be get to know about some array methods in the javascript, how we can take use of these functions and try to learn about these with the help of basic examples.  
Methods to be covered in this article -  
1\. `push()` and `pop()`  
2\. `shift()` and `unshift()`  
3\. `map()`  
4\. `filter()`  
5\. `reduce()`  
6\. `foreach()`

## What is Array?

The `Array` object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name.

*   **JavaScript arrays are resizable** and **can contain a mix of different data types.**
    
*   **JavaScript array-copy operations create shallow copies**. (All standard built-in copy operations with *any* JavaScript objects create shallow copies, rather than deep copies).
    

### 1\. Array.prototype.push()

The `push()` method of `Array` instances adds the specified elements to the end of an array and returns the new length of the array.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/0a94a852-f37e-4505-9c38-ca6d795fc369.png align="center")

> The `push()` method appends values to an array.
> 
> `Array.prototype.unshift()` has similar behavior to `push()`, but applied to the start of an array.
> 
> The `push()` method is a mutating method. It changes the length and the content of `this`.

### 2\. Array.prototype.pop()

The `pop()` method of `Array` instances removes the **last** element from an array and returns that element. This method changes the length of the array.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/21e21210-b66b-416d-beca-acbf2c349dd6.png align="center")

> If you call `pop()` on an empty array, it returns `undefined`.
> 
> `Array.prototype.shift()` has similar behavior to `pop()`, but applied to the first element in an array.

### 3\. Array.prototype.shift()

The `shift()` method of `Array` instances removes the **first** element from an array and returns that removed element. This method changes the length of the array.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/f665cc60-96b3-4189-9185-e8713eaafed3.png align="center")

> The `shift()` method shifts all values to the left by 1 and decrements the length by 1, resulting in the first element being removed.

### 4\. Array.prototype.unshift()

The `unshift()` method of `Array` instances adds the specified elements to the beginning of an array and returns the new length of the array.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/1b8a760f-719a-4332-87fa-f311b0c2dd93.png align="center")

The `unshift()` method inserts the given values to the beginning of an array-like object.

### 5\. Array.prototype.map()

The `map()` method of `Array` instances creates a new array populated with the results of calling a provided function on every element in the calling array.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/b38de2e7-2df8-4008-9feb-c4339c5a1e6a.png align="center")

> It takes the callback function as the parameter . A function to execute for each element of the array and then the returned value is added as a single element in the new array.
> 
> The callback function can take three parameters -  
> 1\. `element` :- The current element being processed in the array.
> 
> 2\. `index` :- he index of the current element being processed in the array.
> 
> 3\. `array` :- The array `map()` was called upon.
> 
> It returns the new array with each element being the result of the callback function.

### 6\. Array.prototype.filter()

The `filter()` method creates a **new array** with all elements that pass the test implemented by a provided function. It does not modify the given array .

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/37c4cac3-faec-4af1-ad6d-be662ca2b4ee.png align="center")

In the given example , we have the array named `words` with some strings in it. After that we use the `filter` function, which is the high order function which takes some other function as the input and returns the new array which satisfy the given condition.  
Here in this example, all the string having the `length > 6` will return true and stored in the new array which is return by the `filter` function after the loop completion.

### 7\. Array.prototype.reduce()

The `reduce()` **function** in JavaScript is **a higher-order method that iloop over an array to reduce it to a single value**.

It applies a callback function to each element, using the return value from the previous iteration as the accumulator for the next. The final accumulated value is returned.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/8fee4f6a-0424-4e98-8c2f-d0006e074795.png align="center")

It takes two values as the parameter , `callback fnc and the result initial value.` With the help of the above example we can se that initialvalue of the accumulator is 10. The function loop over the array sum the accumulator and currentValue and finally return the final value.

### 8\. Array.prototype.forEach()

The `forEach()` method of `Array` instances executes a provided function once for each array element.

![](https://cdn.hashnode.com/uploads/covers/63cbeb71587fc59d3cd75412/073bbd3e-a0f8-4b9d-99d8-f9fe985a9bc2.png align="center")

> Note : There is no way to stop or break a `forEach()` loop other than by throwing an exception. If you need such behavior, the `forEach()` method is the wrong tool.

Conclusion - With this article, we get to know about some of the important function to use with or loop over the array.

Refer the mdn docs for more depper explaination ablout these functions. This article is about to give the basic overview about these functions.