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.

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:

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

Or they can be objects:

1

const people = [

2

    { name: "patrick", age: 21 },

3

    { name: "chimamanda", age: 25 },

4

    { name: "joe", age: 32 },

5

    { name: "sam", age: 16 },

6

]

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:

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

2

3

let reversedPeople = people.reverse()

4

5

console.log(reversedPeople)

6

7

// ["sam", "joe", "chimamanda", "Patrick"]

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

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

2

3

console.log(people.includes('sam')) // true

4

console.log(people.includes('jack')) // false

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.

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

2

3

const lastPerson = people.pop()

4

5

console.log(lastPerson) // "sam"

6

console.log(people) // ["patrick", "chimamanda", "joe"]

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():

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

2

3

const count = people.push('akilah', 'isaac')

4

5

console.log(count) // 6

6

console.log(people) // ["patrick", "chimamanda", "joe", "sam", "akilah", "isaac"]

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.

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

2

3

const firstPerson = people.shift()

4

5

console.log(firstPerson) // "patrick" 

6

console.log(people) // ["chimamanda", "joe", "sam"]

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:

1

const people = ['patrick', 'chimamanda', 'joe', 'sam']

2

3

const count = people.unshift('akilah', 'isaac')

4

5

console.log(count) // 6

6

console.log(people) // ["akilah", "isaac", "patrick", "chimamanda", "joe", "sam"]

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):

1

const numbers = ['one', 'two', 'four', 'five']

2

3

numbers.splice(2, 0, "three")

4

5

console.log(numbers) // ["one", "two", "three", "four", "five"]

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:

1

const numbers = ['five', 'two', 'three', 'four', 'five']

2

3

numbers.splice(0, 1, "one")

4

5

console.log(numbers) // ["one", "two", "three", "four", "five"]

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.

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