JavaScript Array Manipulation — Part I:
Destructive Methods
In JavaScript, there are several methods available to us that are used to add and remove elements from an array. Below, I will be going over the following methods: push(), unshift(), pop(), shift(), and splice(). These are all destructive, or mutating methods, which means that they are directly modifying the array they’re being invoked on.
ADDING ELEMENTS
Let’s say we have a Weimaraner named Coco. She just had 4 puppies!
We can create an array to represent our litter:
A few minutes later, one last puppy is born. It’s a girl! We’ll name her Lady.
So we need a method that will add Lady to our puppies array. We can use the push() method like so:
Here, we are pushing a new element, ‘Lady’, to the end of our puppies array and if we log puppies, we get the following in the console:
our puppies array now contains all our puppies!
We could’ve also used the unshift() method. unshift() would add ‘Lady’ to the beginning of the array, but since she’s the last of the litter, we went with the push() method. These two methods are similar, since they’re both used to add elements to an array, the only difference is where in the array the elements are being added.
push() and unshift() both allow us to add more than one element to an array at the same time. The return value for these two methods is the new length of the array:
REMOVING ELEMENTS
So the puppies are all healthy and ready to be sold to their new owners!
The first one to go is Bailey. To remove him from our puppies array, we’ll use the shift() method. shift() removes the first element of an array:
this leaves us with four pups:
The pop() method is similar as it also removes an element, the difference is that this method removes the last element of the array. With pop() and shift(), we can’t remove more than one element at a time. The return value for both methods is the removed element.
We just sold Jax and Ollie! To remove Jax from the array of puppies, we can use the splice() method:
the result:
As shown above, in order to remove elements, splice() accepts a couple arguments. The first one is the start index, or where we want to begin changing the array. The second is the count of how many elements are to be removed from the start index.
REPLACING ELEMENTS
Bailey’s owners have come back to return him. Apparently, our Bailey is too energetic and they want a calmer pup. No problem! Cooper is exactly what they’re looking for!
To replace ‘Cooper’ with ‘Bailey’ in our puppies array, we can use splice() again:
and our puppies array now looks like:
Notice that in order to replace an element, splice() accepts a third argument. This should be the element that is being added. To replace with more elements, just pass them in as additional arguments:
As shown above, the return value for splice() is an array containing the removed element(s).
This covered some of the destructive methods used to manipulate arrays in JavaScript. In my next blog, I will be going over some non-destructive methods.
