Array Methods
Tags: javascript
Published: 2022-07-29 20:14:50

So, you are starting to look over array methods and the basics on how they work?

Good, lucky for you, I have a few examples we can go over together. Now let us get started!

For our first example we can start with the Javascript methods we use to add elements to an array: 

**.push() and .unshift().**

These two methods are destructive so keep that in mind!

These methods work in the same way, they both take one or more arguments (element or elements you want to add). They both return the length of the modified array and remember, they are both **DESTRUCTIVE!**

The difference between these two is that .unshift() will add the element at the beginning and .push() will add the element or elements to the end of the array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14p9udb8e2wg5jzo7j7l.png)

Now introducing the **spread operator** which looks like this " ... " yes three dots/periods.

This important operator allow us to "spread out" the elements of an existing array into a **new array** basically creating a copy of the original array, pretty cool and very useful!



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

Where the spread operator is specially useful is when we want to add one or more new elements either before or after the elements inside the array you want to work with. To add the new element to the beginning of the array we simply add the new element **before** spreading the elements in the original array (array you want to modify). 

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

And to add a new element to the end of the original array we will simply do the opposite and spread the elements before adding our new element. 

Now remember this spread operator allowed us to create a **new array** therefore creating a copy of the original array without modifying it! 

Keeping up? Awesome! Now let us move on to our next set of methods:

**.pop() and .shift()**

These two methods are **DESTRUCTIVE** and work in the same way. They both do **NOT** take any arguments they remove a single element, return the element that was removed and do not forget they are destructive!

The difference between these two is that **.shift()** will remove the first element of the array. While **.pop()** will remove the last element of the array.


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


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

Now since these methods are **destructive** they both returned the removed element therefore mutating the original array!

And if you are wondering how we can remove an element in an array without mutating the original array, do not worry. Javascript has just the right method for you! 

Introducing **.slice()** 
This method is **NONDESTRUCTIVE** meaning it will not mutate your precious array. This method can take zero arguments, one argument or two arguments and will return a **new array** containing the sliced elements. Pretty cool!

When **.slice()** is not provided with an argument it will simply return the original array with all the elements untouched.


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

We can also provide one argument, this will make slice start working from the index specified in the argument provided to the end of the array.
Quick example: 

**const days = ["Mon", "Tue", "Wed", "Thu" "Fri"]**
**days.slice(2);**
**will return ["Wed", "Thu", "Fri"]**

Keep in mind we are working with an array which means the index count starts at zero! 
**Mon = 0**
**Tue = 1**
**Wed = 2** 
And so on, which means if we want to start slicing at "Tue" we would have to **days.slice(1)**
Slice can also take a negative index! Doing so will tell Javascript to start counting from the last element, yes backwards! So If we do **days.slice(-1)** we would actually get **"Fri"** back.

Now let us move forward, we are almost there.
Introducing **.splice()** this is the mean brother of **slice()**. Splice is **DESTRUCTIVE** we can perform a few things with this method. We can remove elements, add elements or replace elements.

When slice is provided with one argument it will use that index at which it will begin to splice destructively! Meaning it will mutate the original array returning a **new array** with the removed elements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ocb54qce7oq3zu7xe95.png)

We can also provide **.splice()** with two arguments. The first still being the start of where to begin to splice and the second will be the number of elements we want to remove from the array! 

So if we **days.splice(2, 3);** we would get in return ["Wed", "Thu", "Fri"]

Pretty cool right! Keep in mind these are the basics and we can actually get pretty complex if we really wished to! We could even **splice()** with three or more arguments! Meaning that after the second argument splice will insert those extra arguments into the array at the position indicated by the first argument passed!

Below I will leave a chart with the Javascript array methods we just went over.


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

Good luck!