How to add and delete last and first elements in a JavaScript array

Introduction :

Javascript provides us a lot of different methods to manipulate array elements. Almost in any development project, we use arrays. Normally, it is required to read/update or delete any intermediate element of an array. For accessing any element in an array, we can use its index. But for adding and removing the first and the last element of an array, javascript provides us a few useful methods.

In this tutorial, we will learn how to add, remove or delete first and last elements of a Javascript array with examples.

Methods :

We will use the below four methods to add and delete first and the last element of a Javascript array :

1. push() : Add to the end
2. pop() : Delete from the end
3. unshift() : Add to the start
4. shift() : Delete from the start

Let’s take a look at these methods one by one :

push() :

This method is used to add elements to the end of an array. It can add one or multiple elements to the end. For example :

var days = ["mon", "tues", "wed" , "thurs"]

console.log(days)

days.push("fri")

console.log(days)

days.push("sat","sun")

console.log(days)

If you run it, it will give you the below output :

[ 'mon', 'tues', 'wed', 'thurs' ]
[ 'mon', 'tues', 'wed', 'thurs', 'fri' ]
[ 'mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun' ]

Here, the first line is the same array that we have initialized i.e. array days. The second line is after we added one element to the array and the third line is after we added two elements to the array. For adding the elements, we are using push() method. As you have seen here, push can be used to add one or multiple elements to the end of an array.

pop() :

pop() method is used to remove the last element of an array. It returns that element of the array and also changes the length of the array. For example :

var days = ["mon", "tues", "wed" , "thurs", "fri", "sat", "sun"]

console.log(days)

console.log(days.pop())

console.log(days)

This program will print the below output :

[ 'mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun' ]
sun
[ 'mon', 'tues', 'wed', 'thurs', 'fri', 'sat' ]

The first line is the original array i.e. days, the second line prints the last element we are removing using pop(). As this method removes and returns the last element of an array, the console.log() method prints that value.

The third line is the final array after the last element or sun is removed.

unshift() :

unshift is same as like push. The only difference is that it adds items to the start of an array. It also returns the final length of the modified array and we can add one or more than one elements using unshift. For example :

var days = ["thurs", "fri", "sat", "sun"]

console.log(days)

console.log(days.unshift("wed"))

console.log(days)

console.log(days.unshift("mon","tues"))

console.log(days)

It will print :

[ 'thurs', 'fri', 'sat', 'sun' ]
5
[ 'wed', 'thurs', 'fri', 'sat', 'sun' ]
7
[ 'mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun' ]

The numbers are the final length of the array unshift method returns.

shift() :

shift is opposite of unshift. It is used to remove elements from the start of an array. It returns the element that is removed. For example :

var days = ["mon", "tues", "wed", "thurs", "fri", "sat", "sun"]

console.log(days)

console.log(days.shift())

console.log(days)

It will print :

[ 'mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun' ]
mon
[ 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun' ]

Conclusion :

We have learned how to add or remove items to the start and end of an array in JavaScript. Try to run the examples shown in this blog post and drop one comment below if you have any questions.