20 JavaScript Array Methods
Tags: javascript, beginners, webdev, tutorial
Published: 2022-12-09 20:08:52

Arrays are one of the most important concepts in JavaScript.

Arrays are objects that enable storing a collection of items and data under a single variable name and have the capability to perform a certain operation.
In this article, we'll go through 20 methods we can use with an array to manage the data we have.

**1)- pop()**

One of the array methods is the **pop()** method.

The **pop()** method removes the last element of an array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyo4lfoto3xi22cp7j26.PNG)

If we console.log the array, it becomes:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ibqlw7axgkgvdlkc0cc.PNG)

**2)- push()**

Unlike **pop()** method, **push()** method adds an element to the end of an array.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5apw4dr9tcmdyj5ywnm4.PNG)

The array now becomes:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f94zedolmzdc2ofu0rae.PNG)

**3)- shift()**

**shift()** method removes the first element of an array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z777cxjtk2axewo4x1e.PNG)

The array becomes then:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk3ddz2eo2j2y0mgjmhv.PNG)

**4)- unshift()**

**unshift()** method adds an element at the beginning of an array.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wcl3tme8lr4r5ia5exu.PNG)

The array becomes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovdy060tsdq086oeyuer.PNG)

**5)- splice()**

To add or remove elements to/from a specific position in the array the **splice()** method allows us to do that.

**a)- Add an element to a specific position**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1qv2oauh98ki33vlmhm.PNG)

To add an element to a specific position we use **splice()** method. It takes 3 parameters at least:

- The first parameter is where, or at what position we want to add our elements. In this example we want to add them at position 2, which means after "Iphone", hence "2" is added as first parameter of **splice()**.
- The second parameter reflects how many elements we want to delete. In this example we don't want to delete any element, so we added "0" as second parameter of **splice()**.
- The third parameter and beyond are the elements that we want to add.

So the array becomes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlaq90bt4uy4gny57laf.PNG)

**b)- Remove a specific element**

**splice()** method, unlike **pop()** and **shift()** methods, allows us to remove any element from an array. All we have to do is to specify its position.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpxge53w0dlwjip05ep3.PNG)

To remove a specific element from the array we use splice() method. It takes 2 parameters:

- The first parameter is where, or at what position we want to add our elements. But here we will use the first parameter to specify
from where the "delete" operation should start. In this example it should start from position 2.
- The second parameter is to specify how many elements should be removed. In this example we want to remove one element.

At the end we have the following array:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n9weomspdvgyc1k3k5n.PNG)
**6)- map()**

**map()** method generally accepts a function as argument. This function runs through each element of the array and returns a new array based on these elements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45fn9w9wn41f0ke0p4vn.PNG)

So here the function took every element of the array "**numbers**" and multiplied it by 2, and at the end returned a new array with the new results.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p37j02fue86ku6nk2yug.PNG)

**7)- filter()**

**filter()** method returns a new array that contains all the elements that pass the test.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7zfmnbokp0ple1xdmvb.PNG)

Here the function returns the age if the age is greater than 30 and stores it in the new array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6c09maf3z20f5pafpxs.PNG)

**8)- concat()**

**concat()** method helps us merge arrays to get one array.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1jj3zr1qbrvf7ghabtt.PNG)

The new array is:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j3iqm1rfewxer8gn15j.PNG)

**9)- fill()**

To fill an array with a static value we use **fill()** method.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wuhrhjx59iz76v4zjok.PNG)

The array becomes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vopa94jgcnfs9tg1b8x.PNG)

We can also add the static value at a specific position of the array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylrnq2von5tsx1w92lv2.PNG)

The array becomes:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1woa9ipo420eg48lopz5.PNG)

To add static values to specific positions of the array we pass the **fill()** method some parameters:

- The first parameter is the static value, in this example it is "Kiwi".
- The second parameter is starting from which position this value should be added, in this example it should be added starting from position 2.
- The third value is at what position w should stop adding the static value. In this example it is at position 4.

**10)- join()**

**join()** method joins the elements of the array and returns a string.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phi1drbzuadrvmitp2ss.PNG)

In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5v15a56vwvk6jkzyjrj9.PNG)

**join()** method accepts a separator that is added between the parenthesis. In this example we chose the backslash "/" as separator, we can choose any separator we want. 

If we choose a hyphen as separator the code will be:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jjfn3ceadza0i0jyd7i.PNG)

And so the results will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt27k56pqofodzeczc18.PNG)

**11)- IndexOf()**

**indexOf()** method returns the first index at which a given element can be found in the array. If the element is not in the array, then the method returns -1.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as1gxb6abp6prrlhry6k.PNG)

In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdd2i05rf74ly2snwn96.PNG)

Here the index of "Kiwi" is 2. Because **indexOf()** returns the index of the first occurrence of the element. If we try this with "apple" we'll have 3 as an index.

However, what about if we have the same element repeated twice or 3 times or more in the array, and we want to know the index of the second occurrence or third or fourth occurrence?

Let's see that with "Kiwi". "Kiwi" is repeated twice. So the index of the first "Kiwi" is 2. To know the index of the second "Kiwi" we'll add:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzwtr2madaxzw4r31802.PNG)

3 represents the start point from where the array should start looking. And here it should start after the first "Kiwi", which means at position 3.

In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8tabwmjhgclle7vj4nj.PNG)

**12)- includes**

**includes()** helps to check if an element is in the array. If so, it returns true.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n85ru1u6nmtgw5ihgcyv.PNG)

**13)- reverse()**

**reverse()** method reverses the order of the array elements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l75zkem0oiejf24l7bd0.PNG)

In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uywqr35ubnnoxtzl2h7n.PNG)

**14)- every()**

**every()** method returns true if all the elements of the array pass the test. This method accepts a function that runs through all the array's elements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv3ko1hk6jbas3kr1r4w.PNG)

**15)- some()**

**some()** is a method that returns true if at least one element in the array passes the test given by the function passed as argument.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp523et3fq61ih59y91r.PNG)

**16)- at()**

**at()** returns the element that is in the index specified in the parenthesis.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjrnun7mp408mr0galf3.PNG)

In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yidvx2donh9nmlwam46.PNG)

**17)- of()**

This method creates a new array from a variable number of arguments, regardless of number or type of the arguments.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuo9yb5joytxvctc1czs.PNG)

In the browser we have an array that is created:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jthoy7ltf1833sphwj82.PNG)

**18)- slice()**

**slice()** method returns a slice or a part of the array.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yt4jpzqvfq7n852jfqyc.PNG)
The new portion of the array will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd5ybn0loctr6gm5yv20.PNG)

The first argument that the slice() method takes is the beginning the returned array should start from. Here the returned array should start from index 1. 

The second argument is the end where the returned array should stop. Here it should stop at index 3. 

The end is not included, which means if we want the slice() method to stop at index 3, then the returned array will contain elements until index 2.

**19)- Array.isArray()**

This method returns true if the declared variable is an array.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co6mw2lt71d2s8tm3bli.PNG)

**20)- delete()**

This methods deletes an element from the array by specifying the index we want to be deleted. However, the **delete() **method leaves undefined or empty holes in the array after the element is deleted.

Which means even if the element is deleted, the length of the array does not change. 

If for example the length of the array is 5, then after an element is being deleted the length will stay 5.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/779drvpnu89hvou6p5sb.PNG)

In the browser we have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyaqeluxl4jwg43qdhyr.PNG)

It is not advisable to use this method to delete elements from an array. 

To delete an element from an array use **splice()** method instead.

## Read More

[HTML tags CheatSHeet](https://purpose-code.com/html-tags-cheatsheet/)

[What are the different types of inputs in HTML forms?](https://purpose-code.com/what-are-the-different-types-of-inputs-in-html-forms/)

[Understanding JavaScript Objects: From Basic Concepts to Practical Usage](https://purpose-code.com/understanding-javascript-objects-from-basic-concepts-to-practical-usage/)

[How to loop through an array in JavaScript?](https://purpose-code.com/how-to-loop-through-an-array-in-javascript/)

[5 ways to declare a function in JavaScript](https://purpose-code.com/5-ways-to-declare-a-function-in-javascript/)