5 Ways To Remove Elements From A JavaScript Array

Introduction

An array is a special variable that holds a collection of values, i.e., multiple values at a given time. JavaScript provides multiple ways to add and remove elements from the array. In this article, we'll look at 5 different javascript array methods to remove an element from a JavaScript array.

Removing an element from the beginning of the array.

JavaScript comes bundled with a shift method that removes an element from the beginning of an array. Usage for this method is quite straightforward. All you need to do is call the shift method on your array, and it'll remove the first element from your array, i.e., the element on the zeroth index.

const numbers = [100, 101, 102, 103, 104, 105];  
const num = numbers.shift();   
console.log(num);  // output: 100  
console.log(numbers); // output: [101, 102, 103, 104, 105]

It returns the removed element and adjusts the indexes for the remaining elements in the array.

If the array is empty, it'll simply return undefined.

const numbers = [];    
const num = numbers.shift();     
console.log(num);  // output: undefined

Removing an element from the end of the array

We need to use the pop method to remove an element from the end of the JavaScript array. The pop method works similarly to the shift method, except it removes the last element of the array and returns that element.

const numbers = [100, 101, 102, 103, 104, 105];    
const num = numbers.pop();     
console.log(num);  // output: 105  
console.log(numbers); // output: [100, 101, 102, 103, 104]

If the array under consideration is empty, the pop method will return undefined.

const numbers = [];      
const num = numbers.pop();       
console.log(num);  // output: undefined

Removing elements from a specific index of the array.

The splice method could be used to remove one or more elements from a specified array index. We need to provide two arguments to remove elements using the splice method. The first argument is the index from where we need to start deleting the elements, and the second argument is the number of items that need to be deleted. It also accepts a third parameter that allows you to add new elements to the array. However, that won't be needed in our case as we're interested in only removing the elements for the sake of this example.

The splice method returns the array of deleted items. If no elements were deleted by splice, it'd return an empty array.

const numbers = [100, 101, 102, 103, 104, 105];  
const partials = numbers.splice(1, 2);  
console.log(partials); // output: [101, 102]  
console.log(numbers); // output: [100, 103, 104, 105]

In the above code snippet, we're starting to delete the elements from index 1, and we'll be deleting two elements at index 1 and 2, i.e., 101 and 102. The splice method will return these elements, which will be stored inside the partials variable, and the numbers array will contain 100, 103, 104, and 105.

In the above example, if we don't pass the second parameter to specify how many elements we wish to delete, the splice method will delete everything starting from index 1.

const numbers = [100, 101, 102, 103, 104, 105];    
numbers.splice(1);   
console.log(numbers); // output: [100]

You can also provide negative parameters if you wish to delete elements from right to left.

const numbers = [100, 101, 102, 103, 104, 105];  
numbers.splice(-2, 2);  
console.log(numbers); // output: [100, 101, 102, 103]

In the above code, the splice method will start deleting elements from index -2, i.e., from the second last element, and will delete 2 elements starting from that position, i.e., 104 and 105.

Removing elements using the delete operator.

The delete operator removes an element from the array at a specific index. However, one thing to remember is that the delete operator does not change the length of the array. It simply removes the old value and replaces it with undefined.

const numbers = [100, 101, 102, 103, 104, 105];  
delete numbers[2];  
console.log(numbers);  // output: [100, 101, undefined, 103, 104, 105]  
console.log(numbers[2]);  // output: undefined  
console.log(numbers.length);  // output: 6

In the above code snippet, we're deleting the element at index 2. The delete operator will remove that element's value replacing it with undefined. And the length of the array numbers will remain unaffected.

Removing elements from the array using the length property

We've already seen how to delete the last element from the array using the pop method. But what if we wish to delete more than one element from the end of an array? We can do this by modifying the length property of that array.

const numbers = [100, 101, 102, 103, 104, 105];  
numbers.length = 3;  
console.log(numbers); // output: [100, 101, 102]

In the above code snippet, we're assigning the value 3 to the length property of the numbers array. This will remove all the elements from the array whose index is greater than or equal to 3.

If we wish to remove all the array elements, we could set the length property to zero.

const numbers = [100, 101, 102, 103, 104, 105];      
numbers.length = 0;      
console.log(numbers); // output: []

Summary

This article taught us 5 Ways To Remove Elements From A JavaScript Array with code examples, and that's it! I hope you enjoyed this article, in case you've any queries or feedback, feel free to drop a comment.