Remove id from object javascript

Sometimes we might be working with an array of objects with unique IDs that allow each of them to be uniquely identified among other objects.

For example:

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Peter' },
  { id: 3, name: 'Kate' },
];

What if we want to remove an object that has a particular ID from the array? We’re going to learn multiple ways of doing so in this article.

JavaScript: The Definitive Guide

Take your understanding of JavaScript to the next level with this international best seller and build your mastery with detailed explanations and illuminating code examples.

We may earn a commission when you make a purchase, at no additional cost to you.

1. The Array findIndex() and splice() Methods

To remove an element from an array by ID in JavaScript, use the findIndex() method to find the index of the object with the ID in the array. Then call the splice() method on the array, passing this index and 1 as arguments to remove the object from the array. For example:

function removeObjectWithId(arr, id) {
  const objWithIdIndex = arr.findIndex((obj) => obj.id === id);
  arr.splice(objWithIdIndex, 1);

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(arr);

The Array findIndex() method returns the index of the first element in an array that passes a test specified by a callback function.

const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex((num) => num === 7);
console.log(index); // 2

We specify a test that an object in that array will pass only if it has an ID equal to the specified ID. This makes findIndex() return the index of the object with that ID.

The Array splice() method changes the contents of an array by removing existing elements while adding new ones simultaneously.

const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice(1, 2);
console.log(arr1); // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 2, 'd', 'e');
console.log(arr2); // [ 'a', 'd', 'e' ]

This method takes three arguments:

1. start – the index at which to start changing the array.
2. deleteCount – the number of elements to remove from start
3. item1, item2, ... – a variable number of elements to add to the array, beginning from start.

We specify a deleteCount of 1 and a start of the target index to make splice() remove just the object with that index from the array. We didn’t specify any more arguments, so nothing is added to the array.

Avoiding Side Effects

The Array splice() method mutates the passed array. This introduces a side effect into our removeObjectWithId() function. To avoid modifying the passed array and create a pure function, make a copy of the array and call splice() on the copy, instead of the original

function removeObjectWithId(arr, id) {
  // Making a copy with the Array from() method
  const arrCopy = Array.from(arr);

  const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id);
  arrCopy.splice(objWithIdIndex, 1);
  return arrCopy;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

const newArr = removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(newArr);

// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log(arr);

Tip

Functions that don’t modify external state (i.e., pure functions) tend to be more predictable and easier to reason about. This makes it a good practice to limit the number of side effects in your programs.

2. The Array filter() Method

We can also remove an element from an array by ID with the filter() method. We call filter() on the array, passing a callback that returns true for every element in that array apart from the object with the specified ID.

Example

function removeObjectWithId(arr, id) {
  return arr.filter((obj) => obj.id !== id);
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

const newArr = removeObjectWithId(arr, 2);

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log(newArr);

// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log(arr);

The Array filter() method creates a new array filled with elements that pass a test specified by a callback function. It does not modify the original array.

Example

const arr = [1, 2, 3, 4];

const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

In our example, we set a test that an object in the array will pass only if its id property is not equal to the specified ID. This ensures that the object with the specified ID is not included in the new array returned from filter().

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

Sign up and receive a free copy immediately.

Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.