To remove a specific element from an array in JavaScript:
- Find the index of the element using the indexOf() function.
- Remove the element with the index using splice() function.
For instance:
const numbers = [1, 2, 3];
const index = numbers.indexOf(3);
if (index > -1) {
numbers.splice(index, 1);
}
console.log(numbers);
Output:
[1, 2]
However, this only removes the first occurrence of the specific element!
To remove all occurrences of the specific element, you need to use a loop.
- Loop through the array from start to end.
- Check if the current element is the target element.
- Remove the target element (if any) using splice().
For example, let’s remove all 3s from an array of numbers:
const numbers = [1, 2, 3, 3, 3, 3, 2, 1];
const target = 3;
var i = 0;
while (i < numbers.length) {
if (numbers[i] === target) {
numbers.splice(i, 1);
} else {
++i;
}
}
console.log(numbers);
Output:
[1, 2, 2, 1]
And yes, this is the easiest way to accomplish the task. There is no Array.remove() function in JavaScript one would assume.
Next, let’s take a look at how you can make this task easier and less repetitive. Then let’s also see a more advanced example in the end.
How to Make It Easier
One way you could make removing elements from an array easier is by storing the above approaches to separate functions:
function removeFirst(arr, target) {
var idx = arr.indexOf(target);
if (idx > -1) {
arr.splice(idx, 1);
}
return arr;
}
function removeAll(arr, target) {
var i = 0;
while (i < arr.length) {
if (arr[i] === target) {
arr.splice(i, 1);
} else {
++i;
}
}
return arr;
}
Now you can use these functions in your project so you do not need to repeat the loop over and over.
const numbers = [5, 10, 15]; console.log(removeFirst(numbers, 10)); // output: [5, 15] const numbers = [1, 1, 2, 2]; console.log(removeAll(numbers, 1)) // output: [2, 2]
Now that you understand how to remove elements from an array in JavaScript, let’s take a look at an alternative approach.
The filter() Function
One way to remove specific elements from an array in JavaScript is by using the filter() function.
The filter() returns a new array with the filtered elements only.
The filter() function works such that it loops through the array of elements and checks if each element satisfies a condition. This condition is implemented as a function that the filter() function calls for each element one by one. If a condition is met, the element is added to the result array.
Here is an illustration:
Let’s implement the filter() that is illustrated above:
var numbers = [1, 2, 3, 3, 3, 4, 5]; const target = 3; const filteredNumbers = numbers.filter(number => number !== target); console.log(filteredNumbers);
Output:
[1, 2, 4, 5]
Of course, you do not have to deal with numbers only.
The filter() function can be applied to easily remove objects from an array based on a criterion.
How to Remove a Specific Object from an Array in JavaScript
To remove a specific object from an array in JavaScript, use the filter() function.
For instance, let’s say we have a line of people objects and we want to remove all persons that are under 18 years old:
var people = [
{"name":"Alice", "age": 20},
{"name":"Bob", "age": 17},
{"name":"Charlie", "age": 32},
{"name":"David", "age": 16},
]
var adults = people.filter(person => person.age >= 18);
console.log(adults);
Output:
{"name":"Alice", "age": 20}
{"name":"Charlie", "age": 32}
This piece of code works such that the filter() function:
- Loops through the list of objects
- Applies a function to each person’s object to check the age of the object.
- Puts each person’s object into the result array if the age is 18+.
- Returns the new array.
Remove Elements from the End of an Array
To remove elements from the end of an array in JavaScript, you can set the length of the array to be less than the current length. This means you make the array shorter than it was originally by changing its length.
For example:
var arr = [1, 2, 3, 4, 5, 6]; arr.length = 4; // This drops the last two elements. console.log(arr); // [1, 2, 3, 4]
To remove the last element from an array, you can also use the Array.pop() method.
This method:
- Removes the last element from the original array. It modifies the original array directly instead of producing a new one.
- Returns the removed last element.
For instance:
var arr = [1, 2, 3, 4, 5, 6]; arr.pop(); console.log(arr); // [1, 2, 3, 4, 5]
Remove Elements from the Beginning of an Array
To remove the very first element of an array in JavaScript, use the Array.shift() method.
This method:
- Removes the first element from the original array. Thus it modifies the original array directly.
- Returns the removed first element.
If there are no elements in the array, the Array.shift() method returns undefined.
For example, let’s remove the first number in the array of numbers:
var arr = [1, 2, 3, 4, 5, 6]; arr.shift(); console.log(arr); // [2, 3, 4, 5, 6]
Remove a Range of Elements Using Array.splice()
Earlier in this guide, you learned how to use Array.splice() to remove a single element.
However, sometimes you do not just want to remove a single item. Instead, you want to remove a range of consecutive items in an arbitrary position in the array.
To remove a range of elements from a JavaScript array, use the Array.splice() method.
The Array.splice() method takes two arguments:
- start. The index at which to start removing items.
- n. The number of elements to remove.
- elements. This is an optional argument. It specifies the elements to be added to the array.
This method returns the removed elements as an array.
For example, let’s remove the 3 letters in the middle:
var names = ["A", "B", "C", "D", "E", "F", "G"]; names.splice(2, 3); console.log(names); // prints ['A', 'B', 'F', 'G']
Remove Elements from an Array Using the ‘delete’ Operator
You can also use the built-in delete operator to get rid of the element of an array.
This assumes you know the index of the specific element you want to remove from the array.
However, notice that this does not change the size of the original array.
Instead of completely removing the element, the delete operator marks the element undefined.
The delete operator works such that it removes a property from an object. If there are no more references to the property, it is automatically released from the memory.
The delete operator returns true if the deletion was successful and false if not.
Unlike you might imagine, the delete operator does not directly free up memory. Instead, memory management happens when the references are broken.
For instance, let’s remove the first letter from an array of characters:
var letters = ["A", "B", "C"]; delete letters[0]; console.log(letters); // logs [empty, "B", "C"]
As you can see, the size of the array remains the same. Now the first element is just an empty, undefined element.
Clear a JavaScript Array
To remove all the elements of a JavaScript array, there are a couple of methods you can use.
- Set the array equal to an empty array. (This can be problematic, soon you learn why)
- Set the length of the array to 0.
- Use the Array.splice() method to remove all the elements from the original array.
- Use the Array.pop() method with a loop to remove all the elements of the original array.
Let’s quickly go through these options one by one.
Perhaps the easiest way is to set the array equal to an empty array.
For example:
var letters = ["A", "B", "C"]; letters = []; console.log(letters); // logs []
However, this can be problematic.
If you have references to this array, they are not going to change. Instead, the references still have the original elements of the array.
If you are not careful this can cause a lot of headaches.
Let’s see an example:
var letters1 = ["A", "B", "C"]; var letters2 = letters1; letters1 = []; console.log(letters1); // logs [] console.log(letters2); // logs ['A', 'B', 'C']
As you can see, even though letters2 is set equal to letters1, the letters2 array remains unchanged after removing the elements from the letters1 array.
To overcome this issue, you need to modify the original array instead of assigning a new array to one of the arrays.
One way to do it is by setting the length of the original array to 0.
For instance, let’s set the length of letters1 to 0. This shrinks the array to contain 0 elements. Because the letters2 array points to this same array in memory, it also changes.
var letters1 = ["A", "B", "C"]; var letters2 = letters1; letters1.length = 0; console.log(letters1); // logs [] console.log(letters2); // logs []
Anyway, the only way to clean the array and all the arrays that reference the original array is by directly modifying the original array.
As you learned earlier, you can modify the original array by removing elements from the Array.splice() method as well.
So you could just as well remove all the elements of the array with the splice() method:
var letters1 = ["A", "B", "C"]; var letters2 = letters1; letters1.splice(0, letters1.length); console.log(letters1); // logs [] console.log(letters2); // logs []
Of course, you could also use the Array.pop() method until the length of the array reaches 0.
For instance:
var letters1 = ["A", "B", "C"];
var letters2 = letters1;
while (letters1.length) {
letters1.pop();
}
console.log(letters1); // logs []
console.log(letters2); // logs []
As you learned earlier, the pop() method also modifies the original array, so both of the arrays are updated.
Conclusion
Today you learned what it takes to remove a specific element in an array in JavaScript.
To recap, there is no such method as array.remove(), so you have to implement one yourself.
To remove one specific element from an array:
- Find the index of the element.
- Remove the element at that index.
To remove all specific elements from an array:
- Loop through the array from start to end.
- For each iteration, check if the current element is the target element.
- If it is, remove the target using the splice() function.
Alternatively, you can use the filter() function to remove one/all specific elements from an array in JavaScript.
Thanks for reading.
Happy coding!