7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Adding and Removing Elements From Arrays in JavaScript

In this article, we'll take a look at various ways to add and remove elements from an array in JavaScript.

Here's a quick reference table for the different array methods that let you add or remove items. Click on the method name to jump to the description below.

Method Position Action
pop() end remove and return item
shift() beginning remove and return item
push() end add item
unshift() beginning add item
splice() anywhere add, remove, or replace items

What Is an Array in JavaScript?

An array is a special variable that can hold more than one value at a time. Each value is separated by a comma.

The values can be strings:

Or they can be objects:

Values can also be of any data type, including number, boolean, and even another array.

You can manipulate or get information about an array using array methods. For example, we can reverse an array using the reverse() method as follows:

We can also use the includes() method to check if a value exists in an array:

Specifically, let's take a look at the methods responsible for inserting items into an array and removing items from an array.

Remove the Last Item From an Array With pop()

The pop() method removes the last value from an array and returns that value.

When pop() is called on the people array, the last value in the array is removed and assigned to lastPerson. The original array (people) is also mutated.

Add One or More Items to the End of an Array With push()

The push() method adds one or more items at the end of an array and returns the length of the array.

For example, let's add two more names to the people array with push():

Remove the First Value From an Array With shift()

The shift() method removes the first value from an array and returns that value. This method's behaviour is the direct opposite of the pop() method.

When shift() is called on the people array, the first value in the array is removed and assigned to firstPerson. As a result, the original array is mutated.

Add One or More Items to the Beginning of an Array With unshift()

The unshift() method add one or more values to the beginning of an array and returns the length of the array. This is the opposite of push(), which inserts the values at the end.

In this example, unshift() adds two names at the beginning of the array:

Remove and Replace Items With splice()

You can use splice() to insert a value inside an array or to replace a value with another value.

The following example shows splice() inserting an item at index 2 (that is, the third spot):

You can also replace a value with another value. In the following example, splice() will replace the value at index 0 (the beginning of the array) with another single value:

Summary

The pop() method removes the last item from an array, while shift() removes the first. push() adds one or more values at the end of an array, while unshift() adds them at the beginning. splice() changes an array by replacing the values.

Method Position Action
pop() end remove and return item
shift() beginning remove and return item
push() end add item
unshift() beginning add item
splice() anywhere add, remove, or replace items

Note that these methods all mutate the original array. So use them with caution!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.