Remove elements from an array in JavaScript

In JavaScript, you can use several methods to remove elements from an array. Here are some of the most commonly used methods:

Not a Medium member? Read this article here

Method 1: Array.splice()

The splice() method is a built-in method in JavaScript that allows you to remove elements from an array by specifying the index of the element to start with and the number of elements to remove. Here's an example:

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi'];
fruits.splice(2, 2);
console.log(fruits); // Output: ['apple', 'banana', 'kiwi']

In this example, we have an array of fruits and we use the splice() method to remove two elements starting from index 2 (i.e., 'orange' and 'mango').

Method 2: Array.pop()

The pop() method is a built-in method in JavaScript that removes the last element from an array and returns it. Here's an example:

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.pop();
console.log(numbers); // Output: [1, 2, 3, 4]
console.log(lastNumber); // Output: 5

In this example, we have an array of numbers and we use the pop() method to remove the last element (i.e., 5) and store it in a variable called lastNumber.

Method 3: Array.shift()

The shift() method is a built-in method in JavaScript that removes the first element from an array and returns it. Here's an example:

const fruits = ['apple', 'banana', 'orange'];
const firstFruit = fruits.shift();
console.log(fruits); // Output: ['banana', 'orange']
console.log(firstFruit); // Output: 'apple'

In this example, we have an array of fruits and we use the shift() method to remove the first element (i.e., 'apple') and store it in a variable called firstFruit.

Method 4: Array.filter()

The filter() method is a built-in method in JavaScript that allows you to remove elements from an array based on a condition. Here's an example:

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(number => number !== 3);
console.log(filteredNumbers); // Output: [1, 2, 4, 5]

In this example, we have an array of numbers and we use the filter() method to remove the element with the value of 3 from the array.

Method 5: Array.slice()

The slice() method is a built-in method in JavaScript that returns a new array with a portion of the original array, starting from the specified start index and ending at the specified end index (exclusive). Here's an example:

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

In this example, we have an array of numbers and we use the slice() method to remove elements from the array by creating a new array that includes elements from the start index (0) up to, but not including, the end index (3).

Method 6: delete operator

The delete operator is a built-in operator in JavaScript that allows you to delete a property from an object or an element from an array. Here's an example:

const numbers = [1, 2, 3, 4, 5];
delete numbers[2];
console.log(numbers); // Output: [1, 2, <1 empty item>, 4, 5]

In this example, we have an array of numbers and we use the delete operator to remove the element at index 2 (i.e., 3). However, this method doesn't update the length of the array and creates an empty item in the array at the deleted index.

Method 7: Array.pop() with spread syntax

You can also use the pop() method in combination with the spread syntax (...) to remove elements from the end of an array and return a new array without the removed elements. Here's an example:

const numbers = [1, 2, 3, 4, 5];
const [, , ...newNumbers] = [...numbers].reverse();
console.log(newNumbers.reverse()); // Output: [1, 2, 4, 5]

In this example, we use the spread syntax to create a copy of the original array and reverse it. We then use array destructuring to ignore the first two reversed elements and extract the rest of the elements into a new array called newNumbers.

I hope this helps clarify how to remove elements from an array in JavaScript using these commonly used methods! Obviously, there are more ways too.