Marking an item off a list

How to remove an element from an array?

ByLeo

An array is an ordered collection of data, used to store numerous values under a single variable name. How do you remove a specific element from a JavaScript array?

There are several methods you can use to eliminate items from an array. Some of them are

  • splice (not to be confused with slice)
  • shift
  • pop
  • filter
  • toSpliced

We can use some of those functions in combination with indexOf and findIndex.

Please note, there are 2 approaches to removing elements from an array:

  1. by removing elements from an array in place, that is, mutating the original array 😬
  2. by returning a new array, without modifying the original array ✅

In most cases, you should avoid mutating the original array. Due to the “pass-by-reference” nature of JavaScript arrays, modifying them can lead to unexpected and hard-to-debug issues.

How to remove an element from an array by index?

You can use one of two JavaScript functions to remove an item from an array by the item’s index.

  1. The splice method will modify the array
  2. The toSpliced method will not modify the original array, rather, it will return a new array

Using splice

The splice method can be used to change the contents of an array by removing elements. It can also be used to replace existing elements and/or add new elements. For this post, we’ll focus on removing array elements.

splice mutates the original array and returns an array containing the removed items.

The first parameter is start, which in our example represents the zero-based index at which to start deleting items from the array.

The second parameter is deleteCount, which indicates the number of elements you wish to remove from start.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Use the index to remove the element
const removed = names.splice(2, 1); 

console.log(removed); // 👉 ['Kip']

// Mutated array 😬
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

You can also remove more than one element from the array.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Use the index to remove the element
const removed = names.splice(1, 3); // 👉 ['Pedro', 'Kip', 'Deb']

// Mutated array 😬
console.log(names); // 👉 ['Napoleon', 'Summer']

Using toSpliced

The toSpliced method can be used to return a new array with the specified items removed.

The first parameter is start, which is the zero-based index where you want to start omitting items on the new array.

The second parameter is deleteCount, which indicates the number of items you wish to omit from start.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Use the index to remove the element
const newArray = names.toSpliced(2, 1); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']
  
// New array
console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

// Original array remains unchanged ✅
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer']

How to remove an element from an array by value?

If you know the value you want to eliminate from the array but don’t know its index, use indexOf or findIndex to find the index of the element, then use splice or toSpliced to remove the element.

Remove an element from an array using indexOf and splice

  1. Provide indexOf the value you’re looking for and it will return the first index where the value is found, otherwise, it’ll return -1.
  2. Once you know the index of the array item you want to remove, use splice. 
const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// 1. Find the index
const index = names.indexOf('Kip'); // 👉 2

// 2. Use the index to specify the element to be removed
if (index !== -1) {
  names.splice(index, 1); // 👉 ['Kip']
}

// Mutated array
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

Remove an element from an array using findIndex and splice

The method findIndex returns the index of the first element that satisfies the provided testing function, otherwise, it’ll return -1.

  1. Provide findIndex a callback function to find the value you’re looking for.
  2. Once you know the index of the array element you want to remove, use splice.
const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// 1. Find the index
const index = names.findIndex(n => n === 'Kip'); // 👉 2

// 2. Use the index to specify the element to be removed
if (index !== -1) {
  names.splice(index, 1); // 👉 ['Kip']
}

// Mutated array
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

Remove an element from an array using filter

filter does not mutate the array, rather, it returns a shallow copy of the given array containing the elements that pass the test. ✅

Please note, if no elements pass the test, filter returns an empty array. 👀

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

const newArray = names.filter(n => n !== 'Kip'); 

// New array
console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

Remove an element from an array using toSpliced

toSpliced does not mutate the original array, rather it returns a new array with the specified elements removed.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Find the index
const index = names.indexOf('Kip'); // 👉 2

// Check the array element was found
if (index !== -1) {
  // Use the index to remove the element
  const newArray = names.toSpliced(index, 1); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']
  
  // New array
  console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']
}

// Original array remains unchanged
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer']

How to remove an object from an array of objects?

With the filter method, you can remove an object from an array by the property value.

Remove an object from an array with the filter method

filter will return a shallow copy of the array containing the array items that satisfy the testing function. 

const customers = [{
  id: 100,
  name: 'Napoleon',
}, {
  id: 101,
  name: 'Pedro',
}, {
  id: 102,
  name: 'Deb',
}];

const filteredByName = customers.filter(
  // specify the property and the value
  customer => customer.name !== 'Pedro'
);

console.log(filteredByName); // 👉 [ { "id": 100, "name": "Napoleon" }, { "id": 102, "name": "Deb" } ];

Remove an object from an array with the toSpliced method

You can create a new array with the specified object removed by using both the findIndex and the toSpliced methods.

Just like its name implies, findIndex returns the index of the first item in the array that passes the test. Then toSpliced can use the index returned to determine which element should not be present on the new array.

const customers = [{
  id: 100,
  name: 'Napoleon',
}, {
  id: 101,
  name: 'Pedro',
}, {
  id: 102,
  name: 'Deb',
}];

const index = customers.findIndex(customer => customer.name === 'Pedro');

if (index !== -1) {
  const newArray = customers.toSpliced(index, 1);

  console.log(newArray); // 👉 [ { "id": 100, "name": "Napoleon" }, { "id": 102, "name": "Deb" } ];
}

Remove an object from an array with the splice method

If you prefer to modify the original array, you can use both the findIndex and the splice methods.

const customers = [{
  id: 100,
  name: 'Napoleon',
}, {
  id: 101,
  name: 'Pedro',
}, {
  id: 102,
  name: 'Deb',
}];

const index = customers.findIndex(customer => customer.name === 'Pedro');

if (index !== -1) {
  customers.splice(index, 1);  
}

// Mutated array 😬
console.log(customers); // 👉 [ { "id": 100, "name": "Napoleon" }, { "id": 102, "name": "Deb" } ];

Create a utility function to remove an element from an array

What is the benefit of programming your own function? Code reuse, that is, repurposing existing code to avoid code duplication.

You can use any of the solutions already presented to program your very own utility function to delete an item from a JavaScript array.

It is always better to avoid mutations and prevent unexpected issues. I would recommend you use one of the solutions that does not modify the original array.

Select one of the solutions, wrap it on a function declaration, make a few adjustments, and clean it up a little. 

function removeElementByValue(arr, value) {
  const index = arr.indexOf(value);

  if (index !== -1) {
    return arr.toSpliced(index, 1);
  }
  
  return arr;
}

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

const newArray = removeElementByValue(names, 'Kip');

console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

How to remove the first element from an array?

Use the shift method to remove the first item from an array. In addition to removing the first element, shift returns the removed value.

const numbers = [1, 2, 3, 4, 5];

const removedValue = numbers.shift();

console.log(`The array of numbers: ${numbers}`); // 👉 2, 3, 4, 5
console.log(`The removed value : ${removedValue}`); // 👉 1

How to remove the last element from an array?

Use the pop method to remove the last item from an array. In addition to removing the last element, pop returns the removed value. 


const numbers = [1, 2, 3, 4, 5];

const removedValue = numbers.pop();

console.log(`The array of numbers: ${numbers}`); // 👉 1, 2, 3, 4
console.log(`The removed value : ${removedValue}`); // 👉 5

How to empty an array?

To remove all elements from an array use the splice method. As the start index use 0 and as the deleteCount use the length of the array.

In the example below, the start argument is 0 and the deleteCount is 5.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

names.splice(0, names.length); // 👉 ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer']

// Mutated array
console.log(names); // 👉 []

Do not use the delete operator to remove elements from an array

You may feel tempted to utilize the delete operator to remove items from a JavaScript array. It looks very simple to use.

I strongly suggest you do not use it. Why? While it does eliminate the item from the array, it doesn’t update the length property. 

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

delete names[2];

// Mutated array 😬
console.log(names); // 👉 ['Napoleon', 'Pedro', undefined, 'Deb', 'Summer']

console.log(names.length); // 👉 5

Similar Posts