How to remove items from an array in JavaScript?

Hi, I am Amit Shekhar, Co-Founder @ Outcome School • IIT 2010-14 • I have taught and mentored many developers, and their efforts landed them high-paying tech jobs, helped many tech companies in solving their unique problems, and created many open-source libraries being used by top companies. I am passionate about sharing knowledge through open-source, blogs, and videos.

In this blog, we are going to learn how to remove items from an array in JavaScript. As there are many ways to remove the items from an array in JavaScript, depending on the use case, we can decide which one to use.

This article was originally published at Outcome School.

We can use any method, operator or property from the following to remove items from an array:

• splice() method
• filter() method
• delete operator
• pop() method
• shift() method
• length property

Let's start learning one by one by examples.

Remove an item using splice() method

In JavaScript, we can use splice() method to remove an item.

const arr = [1, 2, 3, 4, 5]
const removeItem = 4
const index = arr.indexOf(removeItem)
if (index > -1) {
  arr.splice(index, 1)
}
console.log(arr)
// [ 1, 2, 3, 5 ]

In the above example, we do not have duplicate items. Let's take another example with duplicate items.

const arr = [1, 2, 3, 4, 5, 4]
const removeItem = 4
const index = arr.indexOf(removeItem)
if (index > -1) {
  arr.splice(index, 1)
}
console.log(arr)
// [ 1, 2, 3, 5, 4 ]

Here, we can see that the duplicate item case is not getting handled. To handle the duplicate item case, we need to iterate over the array.

const arr = [1, 2, 3, 4, 5, 4]
const removeItem = 4
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === removeItem) {
    arr.splice(i, 1)
  }
}
console.log(arr)
// [ 1, 2, 3, 5 ]

Now, we can see that the duplicate item case is also getting handled.

It's time to create utility functions that can be used directly.

function removeOneItem(arr, removeItem) {
  const index = arr.indexOf(removeItem)
  if (index > -1) {
    arr.splice(index, 1)
  }
  return arr
}

const arr = [1, 2, 3, 4, 5, 4]
const removeItem = 4
console.log(removeOneItem(arr, removeItem))
// [ 1, 2, 3, 5, 4 ]

function removeAllItems(arr, removeItem) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === removeItem) {
      arr.splice(i, 1)
    }
  }
  return arr
}

const arr = [1, 2, 3, 4, 5, 4]
const removeItem = 4
console.log(removeAllItems(arr, removeItem))
// [ 1, 2, 3, 5 ]

This way, we can use these utility functions removeOneItem and removeAllItems.

This way, we can use splice() to remove an item. Now, let's move on to the filter() method.

Remove items using filter() method

In JavaScript, we can use filter() method to remove an item.

let arr = [1, 2, 3, 4, 5, 4]
const removeItem = 4
arr = arr.filter((item) => item != removeItem)
console.log(arr)
// [ 1, 2, 3, 5 ]

When we use the filter method, the duplicate item case is also getting handled by default.

Next one is delete() operator.

Remove an item using delete() operator

In JavaScript, we can use delete() operator to remove an item.

const arr = [1, 2, 3, 4, 5]
const removeAtIndex = 3
delete arr[removeAtIndex]
console.log(arr)
// [1, 2, 3, empty, 5]

It is important to notice that we have an empty item at that removed index.

Remove the last item using pop() method

pop() method can be used to remove the last item from an array.

const arr = [1, 2, 3, 4, 5]
arr.pop()
console.log(arr)
// [ 1, 2, 3, 4 ]

This was an example of using pop() method to remove the last item from an array. Similarly, we can use the shift() method to remove the item from the beginning of an array.

Remove the item from the beginning using shift() method

shift() method can be used to remove the item from the beginning of an array in JavaScript.

const arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr)
// [ 2, 3, 4, 5 ]

This was an example of using shift() method to remove the item from the beginning of an array. Last one is length property.

Remove items from the end using length property

In JavaScript, length property can be used to remove the items from the end of an array.

Here, we can provide the length of the array that will be left after the items removal.

const arr = [1, 2, 3, 4, 5]
arr.length = 4
console.log(arr)
// [ 1, 2, 3, 4 ]

const arr = [1, 2, 3, 4, 5]
arr.length = 3
console.log(arr)
// [ 1, 2, 3 ]

So, we understood how to remove items from an array in JavaScript.

That's it for now.

Thanks

Amit Shekhar

Co-Founder @ Outcome School

You can connect with me on:

• Twitter
• YouTube
• LinkedIn
• GitHub

Read all of our blogs here.