Working with arrays is fun In this tutorial we are gonna learn Array Methods in Javascript which will help us to play with arrays more efficiently and will make a lot of things quite easy for us In this tutorial i am gonna cover only the 6 most important and mostly used methods to play with an array

But if you want to go in more deep you always know that MDN is your friend if you want you can check out MDN DOCS

Why Only 6 Bro ???

Actually the answer is a quite simple bro these 6 methods are the methods you will need the 90% of the time in your developer journey and if i tried to cover all the methods than this tutorial gonna be a lot longer and why to waste time when we have MDN (Thanks to MDN )

So Let’s Start without wasting a second more but let’s have a look at what is an array first only a little overview

What is an array?

If you don’t know that what is an array so actually array is just a way to store multiple data types under a single name and use them

If you want to learn more about array and its indexing you can have a look at this post of mine Here

The Push Method

Let’s start with the first one in the list the Push Method

Let’s start by creating an array named fruits

//Creating an Array for storing fruits //

var fruits = ["apple","banana","mango"]

Now let’s add one more fruit cherry to this fruits array

//Adding the cherry to fruits array //
fruits[3] = "cherry"

Now the cherry is added into the fruits array

Now the problem with this method of adding into an array is that i need to keep track of the index and then add to it However there is an easier and more simple way to handle this with the push method

As its name suggests it just pushes an item it is given to the array

So what the push method basically does it adds the data to the end of an array with which it is called

//Using Push Method to add berry to the fruits array //

fruits.push("berry")

Now this will return us the current no. of values in the array

So what do you think isn’t it a more simple and easy way to add items to an array

The POP method

Now let’s talk about the second method in this list which is the POP method now what pop does is it is the exact opposite of the push method as the push method adds an item to an array the pop method removes the last object from an array

It doesn’t need any arguments just use it with the arrayName.pop() that’s it

//Using pop method to fruits array //

fruits.pop()

It returns us with the value which is removed Now when you run the above code it returns “berry” now if we run fruits it returns 4 items

So we can say that pop worked

Both PUSH/POP are a group one to add to the last of array one to remove from the last of the array

The Unshift Method

The Unshift Method and the Shift Method are as same as PUSH and the POP method

As the push method adds an item to the end of an array the unshift adds an item to the front of an array

Let’s See an example

// Creating the array of colours //

var colours = ["blue","green","yellow"]

//Now lets add a colour red to the first place //

colours.unshift("red")

That’s it with the unshift the only difference between the PUSH and the Unshift is the place where the add things the PUSH adds at the last whereas the Unshift adds it to front

The Shift Method

The Shift Method is the opposite of the Unshift Method whereas the Unshift adds an item to the front the Shift Method removes an item from the front

Let’s See

// Creating the array of colours //

var colours = ["blue","green","yellow"]

//Using Unshift to remove blue from here //

colours.shift()

The Main Difference Between the Shift and the POP method is the place where they remove from as the POP removes an item from the last the shift removes an item from the front

The indexOf Method

The IndexOf method is used to find the index of an item from an array

Imagine you are hired at a Huge Company Like Google and there you have given a task in which you have to find a specific thing from an array of like thousand different things

Now obviously you don’t gonna find that by reading all 1000 different entries means it gonna take hours so here comes our great friend indexOf which is just there to find an item from an array

Let’s See an example

//Creating an Array of Countries //

var countries = ["US","UK","IN","PK","DE"]

//Now Let's Suppose I want to see that where is IN is located in this array //

//To do that we can use indexOf //

countries.indexOf("IN")

This returns us with the value that where IN is located

One more thing that i want to tell you that if the array has repeated values than indexOf will consider the first one

Let Me Show You

//Creating an Array of Countries //

var countries = ["US","UK","IN","PK","DE","US"]

//Now Let's Suppose I want to see that where is US is located in this array //

//To do that we can use indexOf //

countries.indexOf("US")

Now if we run this it returns 0 because the first Consideration for the US to find is on the index 0 that’s Why it returned 0

Invalid Search ??

Hey what if i search an item that is not present in the array that’s a good question which arrives a curious mind so why to wait

Let’s try that as well

//Creating an Array of Countries //

var countries = ["US","UK","IN","PK","DE",]

//Now Let's Suppose I want to see that where is AU is located in this array //

//To do that we can use indexOf //

countries.indexOf("AU")

Now if you run this it returns -1 which is a number presentation of false means that this is not present in the array

Now Let’s Move to the Last Method of this Tutorial which is slice method

The Slice Method

The Slice Method is a way to copy a certain part of an array or a complete array whatever the user wants to

The General Syntax Looks like

arrayName.slice(no._From_Where_to_start_copying,no._Before_Which_to_end_copying)

So Yeah maybe i added enough info so actually the slice method takes two numeric arguments but they are not mandatory

The first one is the index from where to start copying (including it)

The Second Number is the index before which stop copying (excluding it)

//Creating an Array of Countries //

var countries = ["US","UK","IN","PK","DE","New York","Los Angels","AG"]

//Now Let's Suppose I want to copy these cities New York and Los Angels to a new array //

var cities = countries.slice(5,7)

Now this will add the 2 Cities New York and the Los Angels to the cities variable

Wrapping UP

Now maybe you have enough understanding of all these 6 methods and if you want to research more the No.1 Resource I recommend will be the MDN DOCS if you have any more questions you can always ping me in the comments