The global object Array itself does not have any remove or delete method. However, there are many other ways to remove array elements in JavaScript.
Below are the different ways to remove array elements in JavaScript.
Overview in Tabular Format
| Method | Description |
|---|---|
1. From the start of an array using the shift() method. | Removes the first element from an array and returns that element. |
2. From the end of an array by setting the array length or using the pop() method. | The pop() method removes the last element from an array and returns it. Setting the array length can truncate the array. |
3. Removing a range of elements from anywhere using the splice() method. | Allows for adding/removing elements from a specific index in an array. |
4. Removing elements by value using splice() and filter() methods. | The splice() method removes elements by index, while filter() creates a new array excluding specified values. |
| 5. By using the Lodash library. (Requires Lodash library to be included in your script: lodash.com) | Lodash provides various utility functions like _.remove for removing elements from arrays. |
6. Using the delete operator. | The delete operator removes an element from an array but does not change its length, leaving undefined in its place. |
Detailed Descriptions
1. Removing elements from the start
- Using shift() method: [Removes only one element]
- It removes the first element of an array and updates the array length and element indexes.
- It also returns the removed element on execution.
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var shiftedElement = testArray.shift();
// First element from the array is removed.
console.log(testArray); // ["B", "C", "D", "E", "F", "G", "H", "I", "J"]
// Array length is updated.
console.log(testArray.length); // 9
// Removed element is returned.
console.log(shiftedElement); // A
// Elements has new indexes in the Array.
console.log(testArray[3]); // E2. Removing elements from the end
- Setting array length: [Removes single or multiple elements]
- Set the array length property to the desired length (less than the actual array length) and the rest of the elements will be removed from the end of an array.
- This way, it will remove elements with an index greater than or equal to the desired length.
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
testArray.length = 6;
// Rest of the elements is removed except first 6 elements.
console.log(testArray); // ["A", "B", "C", "D", "E", "F"]
// Array length is updated.
console.log(testArray.length); // 6
// Elements has new indexes in the Array.
console.log(testArray[4]); // E- Using pop() method: [Removes only one element]
- It removes the last element of an array and updates the array length and element indexes.
- It also returns the removed element on execution.
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var popedElement = testArray.pop();
// Last element "J" from the array is removed.
console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
// Array length is updated.
console.log(testArray.length); // 9
// Removed element is returned.
console.log(popedElement); // J
// Elements has new indexes in the Array.
console.log(testArray[2]); // C3. Removing a range of elements from anywhere
- Using the splice() method: [Removes any number of elements from anywhere in an array]
- It removes any number of elements from anywhere in an array and updates the array length and element indexes.
- It also returns all removed elements as a new array.
- It requires arguments to be passed (zero-based index).
- Only the 1st argument is mandatory which specifies the position from where to add/remove elements.
- The 2nd argument specifies the number of elements to be removed.
- The 3rd and the rest of the arguments after that specify new elements to be added to the array.
Remove elements from the middle:
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var removedElement = testArray.splice(2, 1);
// Element "C" at the 2nd index from the array is removed.
console.log(testArray); // ["A", "B", "D", "E", "F", "G", "H", "I", "J"]
// Array length is updated.
console.log(testArray.length); // 9
// Removed element is returned.
console.log(removedElement); // ["C"]
// Elements has new indexes in the Array.
console.log(testArray[4]); // FRemove elements from the start:
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var removedElement = testArray.splice(0, 2);
// 2 elements "A" and "B" from the start of the array is removed.
console.log(testArray); // ["C", "D", "E", "F", "G", "H", "I", "J"]
// Array length is updated.
console.log(testArray.length); // 8
// Removed elements are returned.
console.log(removedElement); // ["A", "B"]
// Elements has new indexes in the Array.
console.log(testArray[4]); // GRemove elements from the end:
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var removedElement = testArray.splice(-3);
// 3 elements "H", "I" and "J" from the 2nd index starting from end of the array is removed.
console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G"]
// Array length is updated.
console.log(testArray.length); // 7
// Removed elements are returned.
console.log(removedElement); // ["H", "I", "J"]
// Elements has new indexes in the Array.
console.log(testArray[4]); // E4. Removing elements by value
- Using the splice() method:
- In this approach, you can loop through the array to check if the element you want to remove matches with the element currently being looped and then remove it.
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var splicedElement;
for ( var i = 0; i < testArray.length-1; i++) {
if ( testArray[i] === "D") {
splicedElement = testArray.splice(i, 1);
}
}
// Element "D" from the array is removed.
console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G"]
// Array length is updated.
console.log(testArray.length); // 9
// Removed elements are returned.
console.log(splicedElement); // ["D"]
// Elements has new indexes in the Array.
console.log(testArray[4]); // F- Using filter() method:
- This does not affect the original array and will return a completely new array with removed elements.
Example 1:
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var filteredElements = testArray.filter(function(value, index, testArray) {
return value === "C";
});
// Original array remains same as before.
console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
// Original array length remains the same.
console.log(testArray.length); // 10
// Element "C" is returned in a new array.
console.log(filteredElements); // ["C"]
// Element indexes are not affected in original array.
console.log(testArray[4]); // EExample 2:
var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var filteredElements = testArray.filter(function(value, index, testArray) {
return value < 7;
});
// Original array remains same as before.
console.log(testArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// Original array length remains the same.
console.log(testArray.length); // 10
// Elements less than 7 are returned in a new array.
console.log(filteredElements); // [1, 2, 3, 4, 5, 6]
// Element indexes are not affected in original array.
console.log(testArray[4]); // 55. Using Lodash library
- This requires the loadash library to be included in your script: https://lodash.com
- Libraries are sometimes a better way to solve complex problems.
- Lodash provides such a rich set of array manipulations.
- It works somewhat similar to the array filter() method but it also updates the original array by removing elements and returning those elements as a new array.
var testArray = ["A", 1, "B", 2, "C", 3, "D", 4, "E", 5];
var numberedArray = _.remove(testArray, function (element) {
// Remove all numbers.
return typeof element === 'number';
});
// All the umbers from the original array are removed.
console.log(testArray); // ["A", "B", "C", "D", "E"];
// Original array length remains the same.
console.log(testArray.length); // 5
// All numbered elements are returned in a new array.
console.log(numberedArray); // [1, 2, 3, 4, 5]
// Element indexes are not affected in original array.
console.log(testArray[3]); // D5. Using the delete operator
- So far we have seen many ways to delete the elements and update the array length and the element’s indexes.
- But the delete operator removes the reference to the element so it becomes undefined.
- Memory is freed when there are no more references to a value so the delete operator frees the memory instead of deleting the element.
var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
delete testArray[3];
// Element at 3rd index is set to undefined in original array.
// It shows as empty here because there is no value for 3rd index.
console.log(testArray); // ["A", "B", "C", empty, "E", "F", "G", "H", "I", "J"]
// Original array length remains the same.
console.log(testArray.length); // 10
// Element at 3rd index is set to undefined.
console.log(testArray[3]); // undefinedConclusion
By understanding and leveraging these various techniques, developers can manipulate arrays in JavaScript more effectively, resulting in cleaner and more maintainable code. Whether you’re working on small projects or large applications, these methods will help you handle array elements with precision and ease.
Here’s a useful resource that tests your JavaScript coding skills entitled: How to Hire a Great JavaScript Developer. It has good examples and questions that are asked in coding interviews.
Happy coding!!!