How to Remove Values from Arrays in JavaScript

Remove by Index

Removing a value by its index position is a straightforward approach. Use the splice() method to delete an element at a specific index.

Example:

const colors = ["yellow", "green", "blue", "white"];
const index = 2;
colors.splice(index, 1); // Remove "blue"
console.log(colors); // Output: ["yellow", "green", "white"]

Additional Methods pop() or shift()

The pop() method removes the last element from an array, while the shift() method removes the first element.

pop()

Remove last element

const array = [1, 2, 3, 4, 5];
array.pop(); // Remove last element
console.log(array); // Output: [1, 2, 3, 4]

shift()

Remove first element

const array = [1, 2, 3, 4, 5];
array.shift(); // Remove first element
console.log(array); // Output: [2, 3, 4, 5]

Key Differences

• filter() Generates a new array, leaving the original unchanged.
• splice() Modifies the original array in place.
• pop() Removes the last element from an array.
• shift() Removes the first element from an array.

Performance

• splice(): Directly modifies the array. Efficient for small arrays, but performance decreases with large arrays due to the need to re-index elements after removal.

• filter(): Creates a new array without modifying the original. Generally faster for large arrays because it does not require re-indexing, but it does use extra memory for the new array.

• indexOf() and slice(): When used together, these are effective for removing a single element but can be slower for frequent operations in large arrays.

When to Use Each Method

• Choose filter() if you need to create a new array without changing the original.
• Opt for splice() if you want to modify the original array.

Other Factors to Consider

• To remove multiple instances of a value, you can either use a loop with splice() or apply a more advanced condition with filter().
• For handling large arrays, filter() may offer better performance than splice().

Removing Multiple Values At Once

If you need to remove all occurrences of a specific value from the array, you can use a loop or filter approach.

Using a Loop with splice()

let array = ["A", "B", "C", "C", "D", "E"];
let valueToRemove = "C";

let index;
while ((index = array.indexOf(valueToRemove)) !== -1) {
    array.splice(index, 1);
}

console.log(array); // Output: ["A", "B", "D", "E"]

Using filter()

let array = [1, 2, 3, 4, 2, 5];
let valueToRemove = 2;

const newArray = array.filter(value => value !== valueToRemove);

console.log(newArray); // Output: [1, 3, 4, 5]

Removing a Single Occurrence

To remove the first occurrence of a specific value from the array, use indexOf() to find the index and then use splice() to remove the element at that index.

let array = [1, 2, 2, 3, 4, 5];
let valueToRemove = 2;

let index = array.indexOf(valueToRemove);

if (index !== -1) {
    array.splice(index, 1); // This modifies the original array
}

console.log(array); // Output: [1, 2, 3, 4, 5]

Removing a value from an array of objects

Removing a value from an array of objects can vary depending on whether you want to remove objects that contain a specific value or if you want to modify individual objects within the array. Here are different approaches based on common scenarios

Using filter() for Objects

If you want to remove objects from an array based on a specific value of a property, you can use the filter method

let arrayOfObjects = [
    { id: 1, name: 'Apple', price: 25 },
    { id: 2, name: 'Orange', price: 50 },
    { id: 3, name: 'Banana', price: 35 }
];

let idToRemove = 2;

arrayOfObjects = arrayOfObjects.filter(obj => obj.id != idToRemove);

console.log(arrayOfObjects);
/* Output:
[
  { id: 1, name: 'Apple', price: 25 },
  { id: 3, name: 'Banana', price: 25 }
]
*/

Using findIndex() and splice() for Objects

If you need to remove an object from an array based on a property, use findIndex() with splice()

let arrayOfObjects = [
    { id: 1, name: 'Apple', price: 25 },
    { id: 2, name: 'Orange', price: 50 },
    { id: 3, name: 'Banana', price: 35 }
];

let idToRemove = 2;

let index = arrayOfObjects.findIndex(obj => obj.id === idToRemove);

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

console.log(arrayOfObjects);
/* Output:
[
  { id: 1, name: 'Apple', price: 25 },
  { id: 3, name: 'Banana', price: 25 }
]
*/

Removing Objects Based on Multiple Conditions

If you need to remove objects based on multiple conditions, you can combine conditions in the filter method

let studentList = [
  { name: "Mei", age: 25, examStatus: "Passed" },
  { name: "Hiroshi", age: 26, examStatus: "Failed" },
  { name: "Jin", age: 23, examStatus: "Passed" },
];

let ageToRemove = 25;
let statusToRemove = "Failed";

studentList = studentList.filter(obj => !(obj.age > ageToRemove && obj.examStatus === statusToRemove));

console.log(studentList);
/* Output:
[
    { name: "Mei", age: 25, examStatus: "Passed" },
    { name: "Jin", age: 23, examStatus: "Passed" }
]
*/

Edge Cases: Handling Unusual Situations

const colors = ["yellow", "white", "black"];
const removeIndex = 5;
colors.splice(removeIndex, 1); // Try to remove a non-existent value
console.log(colors); // Output: ["yellow", "white", "black"]

const array = [1, null, "A", undefined, "3", 0];
const cleanArray = array.filter(item => item !== null && item !== undefined);
console.log(cleanArray); // Output: [1, "A", "3", 0]

const fruits = ["apple", "grapes", "apple", "orange"];
const uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // Output: ["apple", "grapes", "orange"]

const nestedNumbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const removeIndex = 1;
nestedNumbers.forEach(innerArray => innerArray.splice(removeIndex, 1));
console.log(nestedNumbers); // Output: [[1, 3], [4, 6], [7, 9]]

const arr = [1, NaN, 2, NaN, 3];
const cleanArr = arr.filter(x => !Number.isNaN(x));
console.log(cleanArr); // Output: [1, 2, 3]

Remove All Values From An Array

Here are some examples of how to remove all values from an array in JavaScript

Method 1: Using length property

You can set the array's length property to 0 to clear the array. This is a common and efficient approach.

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

Method 2: Using splice()

The splice() method can be used to remove all elements from the array. This method changes the original array.

const arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);
console.log(arr); // Output: []

Method 3: Using while loop

Another approach is to use a while loop to repeatedly call pop() until the array is empty.

const arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
  arr.pop();
}
console.log(arr); // Output: []

Method 4: Assigning an empty array

You can also simply assign a new empty array to the variable. This method is useful if you don't need to keep the original reference to the array.

let arr = [1, 2, 3, 4, 5];
arr = [];
console.log(arr); // Output: []

Note: Some of these methods modify the original array, while others create a new empty array. Choose the one that best fits your use case.