Tutorials Tonight's Logo
Follow Us

JavaScript Remove Object From Array By Value


In this article, you will look at 2 different methods to remove an object from the array by its value.

JavaScript has a direct method to iterate, add or remove an element from beginning or end in an array however no direct method to remove an array element at some specific index.

Regardless, JavaScript has some array method using which you can create this remove functionality to be used on your array.

Here we have listed 4 different ways to remove the object from the array by value.

    Table of contents

  1. Using splice method
  2. Using filter method

1. Remove object from array using splice method

The splice() method is used to remove or replace or shift an array element with something else. You can use this to remove an object from the array.

Let your array be as given below.

let employees = [
  { id: 1, salary: 25000, shift: "day" },
  { id: 2, salary: 38000, shift: "day" },
  { id: 3, salary: 23000, shift: "night" },
  { id: 4, salary: 20000, shift: "day" },
  { id: 5, salary: 45000, shift: "night" }
];

Suppose you want to remove a worker from the array whose id is 3, then simply loop through the array elements and check for the id of each element. If id is equal to desired value then use the splice method and remove the element.

Example

let employees = [
  { id: 1, salary: 25000, shift: "day" },
  { id: 2, salary: 38000, shift: "day" },
  { id: 3, salary: 23000, shift: "night" },
  { id: 4, salary: 20000, shift: "day" },
  { id: 5, salary: 45000, shift: "night" }
];
// removing object with id = 3
for (let i = 0; i < employees.length; i++) {
  if (employees[i].id === 3) {
    employees.splice(i, 1);
    break;
  }
}
console.log(employees);
▶ Try It

In the above example, the for loop iterates through the array and check if desired id (3) exist in the object. If it exists then uses employees.splice(i, 1) to remove that element. Here employees.splice(i, 1) means remove 1 element from employees array at index i.

Removing more than one object

Suppose you want to remove all employees whose salary is less than 25000. How can you do this using the splice method?

Here is the code to remove all employees with a salary less than 25000.

let employees = [
  { id: 1, salary: 25000, shift: "day" },
  { id: 2, salary: 38000, shift: "day" },
  { id: 3, salary: 23000, shift: "night" },
  { id: 4, salary: 20000, shift: "day" },
  { id: 5, salary: 45000, shift: "night" }
];
// remove all worker with less than 25000 salary
for (let i = 0; i < employees.length; i++) {
  if (employees[i].salary < 25000) {
    employees.splice(i, 1);
    i--;
  }
}
console.log(employees);
▶ Try It

Output

object removed by value from array

2. Remove object from array using filter method

The filter is an array method that executes a callback function for each and every element of the array. These callback functions return true or false, on the basis of return by the callback function the filter method keeps the element in the new array which it finally returns.

If the callback function returns true then the filter method includes that element in a new array and if the return is false then it does not include that element in a new array.

You can use the filter method and control callback function to return false for the object you want to remove.

Example

let employees = [
  { id: 1, salary: 25000, shift: "day" },
  { id: 2, salary: 38000, shift: "day" },
  { id: 3, salary: 23000, shift: "night" },
  { id: 4, salary: 20000, shift: "day" },
  { id: 5, salary: 45000, shift: "night" }
];
// remove all employees with less than 25000 salary

employees = employees.filter(function (worker) {
  // return true for salary greater than eauals to 25000
  return worker.salary >= 25000;
});
console.log(employees);
▶ Try It

In the above example, the filter method filters out the employee with a salary of less than 25000 by condition given in the callback function. Since it returns a new array with filtered elements, so you can either store it somewhere or assign it to the original array.


Conclusion

You have gone through 2 clean and advanced ways to remove an object from the array by its value. These methods just not remove the object and keep the undefined value at the index but totally remove the object and shift the next object element to its position.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.