How to remove an element from an array in JavaScript?

Removing elements from an array is a fundamental operation in JavaScript, essential for data manipulation, filtering, and transformation. This guide will explore different methods to efficiently remove elements from an array, enhancing your understanding and capability in handling arrays.

Why Remove Elements from an Array?

Removing elements from an array is important for:

  • Cleaning and sanitizing data.
  • Implementing specific functionalities like filtering out unwanted items.
  • Improving performance by reducing the size of datasets.

There are several methods to remove elements from an array in JavaScript. While the specifics of these methods will be detailed in the approaches section, here’s a brief approaches:

Table of Content

  • 1. Using pop method
  • 2. Using shift method
  • 3. Using splice method
  • 4. Using filter() function
  • 5. Using Delete Operator
  • 6. Using _.remove() method


1. Using pop method

pop() method is used to remove the last element of the array and returns the removed element. This function decreases the length of the array by 1. 

Example:

Javascript
// JavaScript code to illustrate pop() function
// to remove array elements

function func() {
    let arr = ["shift", "splice", "filter", "pop"];

    // Popping the last element from the array
    let popped = arr.pop();
    console.log("Removed element: " + popped);
    console.log("Remaining elements: " + arr);
}
func();

Output
Removed element: pop
Remaining elements: shift,splice,filter

2. Using shift method

shift() method is used to remove the first element of the array and reduce the size of the original array by 1. 

Example:

Javascript
// JavaScript code to illustrate shift() method
// to remove elements from array
function func() {
    let arr = ["shift", "splice", "filter", "pop"];

    // Removing the first element from array
    let shifted = arr.shift();
    console.log("Removed element: " + shifted);
    console.log("Remaining elements: " + arr);
}
func();

Output
Removed element: shift
Remaining elements: splice,filter,pop

3. Using splice method

The JavaScript Array splice() method can be used to remove any particular element from an array in JavaScript. Moreover, this function can be used to add/remove more than one element from an array. 

Syntax:

array.splice(index, howmany, item1, ....., itemX)

Return Value: A new Array, containing the removed items (if any). 

Example: This example uses the splice() method to remove a particular element from an array. 

Javascript
let Arr = ["C++ ", " Java ", 
           " Python ", " Go ", " Prolog"];

function removeElement() {
    Arr.splice(2, 1);
    console.log(Arr);
}

removeElement();

Output
[ 'C++ ', ' Java ', ' Go ', ' Prolog' ]

4. Using filter() function

This method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument function. 

Example:

Javascript
// JavaScript to illustrate filter() method
function isPositive(value) {
    return value > 0;
}

function func() {
    let filtered = [101, 98, 12, -1, 848].filter(isPositive);
    console.log("Positive elements in array: " + filtered);
}
func();

Output
Positive elements in array: 101,98,12,848

5. Using Delete Operator

Use the Delete Operator to remove elements from a JavaScript array. 

Example:

Javascript
// Declare and initialize an array
let array = ["lowdash", "remove", "delete", "reset"]

// Delete element at index 2
let deleted = delete array[2];

console.log("Removed: " + deleted);
console.log("Remaining elements: " + array);

Output
Removed: true
Remaining elements: lowdash,remove,,reset

6. Using _.remove() method

The _.remove() method is used to remove all elements from the array that predicate returns True and returns the removed elements.

Example:

Javascript
let array = [101, 98, 12, -1, 848];
let evens = _.remove(array, function (n) {
    return n % 2 == 0;
});

console.log("odd elements: " + array);
console.log("even elements: " + evens);

Output: 

odd elements: 101, -1
even elements: 98, 12, 848

Understanding how to remove elements from an array is vital for effective JavaScript programming. This guide introduces the importance and basic prerequisites, setting the stage for a deeper dive into various methods. By focusing on core concepts and their practical applications, you can enhance your JavaScript skills and optimize your code for better performance and readability.

Supported Browsers: The browser supported by the Array splice() Method is listed below:

  • Google Chrome
  • Apple Safari
  • Firefox
  • Opera
  • Edge