How to Remove an Item from A JavaScript Array in 5 Ways
There are many ways to remove items from a JavaScript array. In this piece, we will look at 5 ways to do this.
For one reason or the other, at times you want to remove items from a JavaScript array. Well, there are very many options out there, but with many options, that means there is also a lot of room for possible mistakes. That is why you are here.
Like any other programming language, JavaScript allows the programmer to play around with the array object, yes, object. The reason why there is an emphasis on an array as an object is because of the fact that a JavaScript array is an actual reference to an address in memory. So, any change that you make on this array, will be persisted all through as you work with it.
Well, with that simple introduction, the next thing is to introduce the means we are going to use in this piece. We will use built in and general approaches to get the work done. So, without further ado, let’s get started!
Also, a disclaimer, the order below is a random one, and not based on any preference. Moreover, each method will be marked as whether it is in-place or out-of-place.
1. Built in array.filter()
Mode: out-of-place.
Well, this method basically receives a list of items and then uses a decisive function to decide what will remain and what will go out of the array.
Then it creates a new array (thus a new address to a JavaScript array object) which you can then assign to your array which you are filtering.
This way, JavaScript array filter gives you the option of getting the results into a new JavaScript array or assign to the original array where the operation was applied, to remove that which you did not want.
For example:
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];First, we create a simple list of numbers one to ten. Then we get a requirement that we need to only show the even numbers from the above list.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// now we want to remain with even numbers from the above array
numbersOneToTen = numbersOneToTen.filter(num => num % 2 === 0);Well, we know that even numbers are divisible by 2 without a reminder, so we use modulo operator for this.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// now we want to remain with even numbers from the above array
numbersOneToTen = numbersOneToTen.filter(num => num % 2 === 0)
// now let's print it out
console.log(numbersOneToTen);
// we should see
// [ 2, 4, 6, 8, 10 ]Now, when we log, we should only be left with even numbers, since we re-assigned out new array from JavaScript array filter result to the original array we applied the filter on.
Okay, question for you. What do you think would have happened if we had not re-assigned the result to the numbersOneToTen array? Well, I will give you a hint, in-place vs out-of-place.
Okay, now onto the next one.
2. Built in array.slice(optionalStart, optionalEnd)
Mode: out-of-place
This is a built in method, which as you can see accepts optionalStart and optionalEnd, which it uses to return a portion of the array.
NB: The indexing of optionalStart and optionalEnd is zero-based, that means that they start from 0.
So, let’s use this example:
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];Once again, we create a hypothetical array of numbers.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// now we use slice
numbersOneToTen = numbersOneToTen.slice(3, 8);Here, we have specified the start as 3 and the end as 8. So, the IMPORTANT thing to note about slice’s optionalStart and optionalEnd is that the resulting array will be inclusive of item at start and exclusive of item at end.
So, our JavaScript array will have the item at index 3 and the item just before index 8.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// now we use slice
numbersOneToTen = numbersOneToTen.slice(3, 8);
// now let's print it out
console.log(numbersOneToTen)
// we should see
// [ 4, 5, 6, 7, 8 ]As you can see, we we have our list start at 4, all through to 8. Because 4 is at index 3 (starting from 0) and 8 is at index 7 (starting from 0).
As a tip: JavaScript array slice sets the boundary of what to be included.
Okay, we march on to the next one!
3. Built in array.splice(requiredStart, optionalDeleteCount)
Mode: in-place
This is the first method which we see has an in-place modification method. Okay, what does this mean? It means that we don’t need to assign the result of the JavaScript array splice operation, because:
- The method returns what was deleted and not what should be left in the array.
- The modification is directly done on the JavaScript array.
With that in mind, be very careful when using this method to remove from JavaScript array.
As you can see, it also accepts some parameter. The first is requiredStart, a mandatory zero-based index for when the splicing should start at.
It also has an optionalDeleteCount, which is a numerical value of the number of items to delete. So, this is not zero-based, rather it is an actual unit. For example, if you set it as 1, then 1 item will be deleted and so on.
So, an example:
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];As usual, we declare our array.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// let's remove everything above index 5
numbersOneToTen.splice(4);Now, we decide to remove everything above index 5. Notice, we don’t pass in the deleteCount, and that means that everything past the requiredStart index will be deleted.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// let's remove everything above index 5
numbersOneToTen.splice(4);
// now let's print it out
console.log(numbersOneToTen);
// we should be left with
// [ 1, 2, 3, 4 ]Okay, now, time for the questions, here, we will have two:
- What do you think will be displayed if we assigned numbersOneToTen to the result of JavaScript array splice? Go ahead and try this.
- What will will be displayed when you try different deleteCounts? Well, give it a shot!
The journey continues!
4. Built in array.pop()
Mode: in-place
Well, this is another in-pace variant to remove from JavaScript array. What JavaScript array pop does is that it removes the last element from an array, and returns that element. This means that:
- No need to assign the array to the result of the pop() method.
- The returned value will be an item, NOT an array.
So, for a simple example:
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];Once more, we declare our JavaScript array.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// by default, pop removes the last item from the array
numbersOneToTen.pop();Then we run call the pop() method on our array.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// by default, pop removes the last item from the array
numbersOneToTen.pop();
// now let's print it out
console.log(numbersOneToTen);
// we should see
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]So, just to remember, we need no argument passed into the pop() method.
Well, time for a simple question:
- What will happen when you try to call pop() on an empty JavaScript array?
- What do you see when you assign numbersOneToTen to the result of pop()
Well, now onto the last one.
5. Old school re-assignment to empty array
Mode: out-of-place
This method simply entails assigning the array to a new one. Since we are not directly calling methods on it, thus in my opinion, it is an out-of-place method, as we are giving it a new reference JavaScript array object (an empty one)
So, this method will completely remove everything from your array. So with such a behavior, use it carefully!
A simple example:
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];As usual, we declare our array.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// let's assign to empty array
numbersOneToTen = [];We then assign it.
// create a new array of numbers one to ten
let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// let's assign to empty array
numbersOneToTen = [];
// now let's print it out
console.log(numbersOneToTen);
// we should now see
// []Now, question time:
- What do you think would happen if we had const numbersOneToTen instead of let numbersOneToTen?
Conclusion
As you can see, it is simple to remove item from JavaScript array. All you need is to understand what your specific need is and then go with the right approach.
PRACTICE: Well, you see, in the above examples, we used let numbersOneToTen, why don’t you go ahead and try using const numbersOneToTen instead. Let me know how this plays out for you.
With that, thank you for reading and until the next one!
Happy Coding!
Are you interested in learning JavaScript? Checkout similar awesome articles on my website: Binge On Code > JavaScript
More content at plainenglish.io
