Removing one or many elements from an array in JavaScript is pretty straightforward. Though with all things programming there is some nuances that you should be aware of and there's a million ways to do it. Let's take a quick look at a few different examples to manipulate elements in JavaScript arrays.
How do I remove a specific value from an array in JavaScript?
If we have a collection of items and we simply want to trim elements off the end of the array, JavaScript offers two simple options out of the box. Below are two examples usingArray.length &Array.prototype.pop().
Trimming an array usingArray.length
var colors = ['red', 'orange', 'yellow', 'green'];console.log(colors.length);// Result: 4
colors.length = 3; // Trim last element off console.log(colors.length);// Result: 3
console.log(colors);// Result: ["red", "orange", "yellow"]
Trimming an array usingArray.prototype.pop()
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];console.log(plants.pop());// Result: "tomato"
console.log(plants);// Result: ["broccoli", "cauliflower", "cabbage", "kale"]
Removing elements from the beginning of a JavaScript array
Now let's take a look at the inverse scenario, assume we have a collection of items and we want to remove elements from the beginning of the array. Similar to pop(), JavaScript usesArray.prototype.shift() to "shift" the first element over.
UsingArray.prototype.shift() to remove the first element
var numbers = [1, 2, 3];var firstNumber = numbers.shift();console.log(firstNumber);// Result: 1
console.log(numbers);// Result: [2, 3]
Using splice() to remove array elements in JavaScript
As you could have guessed, JavaScript also has a method that allows you to either remove from the beginning of an array OR trim from the end on an array. This magical method is known asArray.prototype.splice(), which takes the start and end index as parameters.
Manipulating an array withArray.prototype.splice()
var months = ['Jan', 'March', 'April', 'June'];// Insert 'Feb' at 1st index positionmonths.splice(1, 0, 'Feb');console.log(months);// Result: ['Jan', 'Feb', 'March', 'April', 'June']// Replace 'June' with 'May' at the 4th index positionmonths.splice(4, 1, 'May');console.log(months);// Result: ['Jan', 'Feb', 'March', 'April', 'May']// Remove 'May' from the 4th index positionmonths.splice(4, 1);console.log(months);// Result: ['Jan', 'Feb', 'March', 'April']// Remove 'Feb' & 'March' from the 1st & 2nd index positionsmonths.splice(1, 2);console.log(months);// Result: ['Jan', 'April']
Remove elements by value using filter()
JavaScript has a built in method to make removing array elements by their value quite easy. TheArray.prototype.filter() method allows you to specify a condition in which the items that satisfy it will be removed. Check the example out below:
Filtering items by value using Array.prototype.filter()
var animals = ['dog', 'cat', 'bird', 'spaghetti'];// Remove the value 'spaghetti' from our animal arrayvar filtered = array.filter(function(value, index, arr){ return value != 'spaghetti';});console.log(animals);// Result: ['dog', 'cat', 'bird']
Using the delete operator to remove JavaScript array elements
Thedelete operator in JavaScript behaves a bit differently than you might think. Delete removes the property from an object, what this means in English is that instead of physically removing the item, its value is set toundefined.
Removing elements using thedelete operator
var fish = ['goldfish', 'carp', 'guppy', 'cod'];// Remove the value at index 2 delete fish[2]; // delete the guppy!
console.log(fish); // Result: ['goldfish', 'carp', undefined, 'cod']
Remove all elements in a JavaScript array
Last but not least, let's have a look at a few ways to completely nuke the array. It should be fairly straight forward to use any of the above methods to empty all elements but let's examine two common scenarios:
Empty an array using Array.length
Array.length deletes everything in the array,including other references. In other words, if you have two references to the same array and you delete the array’s contents usingArray.length, both references will now point to the same empty array. Here is an example using two arrays:
var fish = ['goldfish', 'carp', 'guppy', 'cod'];
// Create a reference from the fish arrayvar fish2 = fish;
// Remove the fishfish.length = 0;
console.log(fish); // Result: []
console.log(fish2); // Result: []
Empty an array by re-initializing the array
Emptying an array by initializing a new array assigns a reference to the new array variable,while excluding other references. This means that references to the contents of the previous array are still kept in memory, which can commonly leading to memory leaks.You can view the issue below by seeing fish2 still holds the values while fish was emptied.
var fish = ['goldfish', 'carp', 'guppy', 'cod'];
// Create a reference from the fish arrayvar fish2 = fish;
// Remove the fish by initializing a new arrayfish = [];
console.log(fish); // Result: []
console.log(fish2); // Result: ['goldfish', 'carp', 'guppy', 'cod']
How do I remove a specific value from an array in Python?
To remove a specific value from an array in most programming languages, you can follow these steps:
Find the index of the element that you want to remove. You can use the
indexOf
method in JavaScript, theindex
method in Python, or a loop to search for the element.Remove the element from the array using the index. You can use the
splice
method in JavaScript or thedel
orpop
method in Python to remove the element.
Here's an example in Python:
arr =[1, 2, 3, 4, 5] value_to_remove =3 if value_to_remove in arr: arr.remove(value_to_remove)print(arr) # Output: [1,2,4,5]
Note that in Python, you can use theremove
method to remove the first occurrence of the element. If there are multiple occurrences of the element, you'll need to use a loop or a list comprehension to remove all of them.