5 Ways To Remove Elements From A JavaScript Array

Introduction

 
An array is a special type of variable that holds a collection of values; .i.e., multiple values at a given point in time. JavaScript provides multiple ways to add and remove elements from the array. In this article, we'll be looking at 5 different ways we could  remove an element from a JavaScript array.
 

Removing an element from the beginning of the array.

 
JavaScript comes bundled with a method called shift that removes an element from the beginning of an array. Usage for this method is quite straightforward. All you need to 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.
  1. const numbers = [100, 101, 102, 103, 104, 105];  
  2. const num = numbers.shift();   
  3. console.log(num);  // output: 100  
  4. console.log(numbers); // output: [101, 102, 103, 104, 105]
It returns the element which was removed and adjusts the indexes for the rest of the elements in the array.
 
If the array is empty it'll simply return undefined.
  1. const numbers = [];    
  2. const num = numbers.shift();     
  3. console.log(num);  // output: undefined  

Removing an element from the end of the array

 
To remove an element from the end of the JavaScript array we need to use the pop method. The pop method works similar to the shift method except it removes the last element of the array and returns that element.
  1. const numbers = [100, 101, 102, 103, 104, 105];    
  2. const num = numbers.pop();     
  3. console.log(num);  // output: 105  
  4. console.log(numbers); // output: [100, 101, 102, 103, 104]  
If the array under consideration is empty the pop method will return undefined.
  1. const numbers = [];      
  2. const num = numbers.pop();       
  3. 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 index of the array. To remove elements using the splice method we need to provide two arguments to it. 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 but that won't be needed in our case as for the sake of this example we're interested in only removing the elements.
 
The splice method returns the array of deleted items. If no elements were deleted by splice it'll return an empty array.
  1. const numbers = [100, 101, 102, 103, 104, 105];  
  2. const partials = numbers.splice(1, 2);  
  3. console.log(partials); // output: [101, 102]  
  4. 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. These elements will be returned by splice method which will be stored inside partials variable and the numbers array will contain 100, 103, 104, 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.
  1. const numbers = [100, 101, 102, 103, 104, 105];    
  2. numbers.splice(1);   
  3. console.log(numbers); // output: [100]  
You can also provide negative parameters if you wish to delete elements from right to left.
  1. const numbers = [100, 101, 102, 103, 104, 105];  
  2. numbers.splice(-2, 2);  
  3. console.log(numbers); // output: [100, 101, 102, 103]  
In the above piece of 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 is used to remove an element from the array at a specific index. However, one thing to keep in mind is the delete operator does not change the length of the array. It simply removes the old value and replaces it with undefined.
  1. const numbers = [100, 101, 102, 103, 104, 105];  
  2. delete numbers[2];  
  3. console.log(numbers);  // output: [100, 101, undefined, 103, 104, 105]  
  4. console.log(numbers[2]);  // output: undefined  
  5. 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 we can 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.
  1. const numbers = [100, 101, 102, 103, 104, 105];  
  2. numbers.length = 3;  
  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 either greater than or equal to 3.
 
If we wish to remove all the elements of the array we could simply set the length property to zero.
  1. const numbers = [100, 101, 102, 103, 104, 105];      
  2. numbers.length = 0;      
  3. console.log(numbers); // output: []    
And that's it! I hope you enjoyed this article, in case you've any queries or feedback, feel free to drop a comment.