Arrays: Splice and Slice
It's easy to add to or remove items from the start of an array with .unshift()
and .shift().
It's easy to add to or remove items from the end of an array with .push() and .pop().
But what do you do if you need to add ot remove something from the middle of an array? Well, .splice() has you covered.
What if you just want to copy things from an array? Give .slice() a
call.
Splice
One of the most useful methods is the splice method. This lets you target any index
in the array and remove any number of items from that point. If you want, you can even stick new values in that spot
all at once. This is very useful for pulling one item off a list from somewhere inside the list. It's often used
with .indexOf() to find that item you're looking to remove.
Unlike many other array methods, splice does change the original array.
Syntax:
- myArray.splice(index, numberOfItemsToRemove, itemsToAdd...);
Example 1:
- let colors = ["blue", "red", "yellow", "green"];
- let snip = colors.splice(1, 2, "gold", "silver");
- //snip → ["red", "yellow"]
- //colors → ["blue", "gold", "silver", "green"];
In this case, splice goes to index 1, which is "red".
It then takes out 2 items, "red" and "yellow" and
saves them to a new array called snip. At that spot, it then adds in "gold"
and "silver" to the colors array. It could have added more items or it didn't
have to add any. It depends on what you need to do.
Example 2:
Here's an example based The Room Adventure. We have an inventory of items. When we use one, we need to remove it from the inventory array. It would work like this.
- let inventory = ["can", "cat food", "flashlight"];
- let itemToRemove = "cat food";
- let index = inventory.indexOf(itemToRemove);
- inventory.splice(index, 1);
- //inventory → ["can", "flashlight"]
Normally the inventory wouldn't be declared right before taking something out of it, but you get the idea, right? We can find where the item is located in the array and then use that to splice it out. We aren't limited to removing items from the start (shift) or end (pop) of a list. And notice that we didn't add any items at this point, so splice only has two parameters.
Slice
Similar to splice is slice. This starts at an index in the array and returns all elements from that point on to the end or to one element before an ending index if you give one. slice does not alter the original array.
Like other methods that return values, this is often assigned to a variable.
Syntax:
- myArray.slice(startIndex, [endIndex]);
- let leftOvers = originalArray.slice(start);
The ending index is optional. If you leave it out, this command returns all elements from the starting index until the end of the array.
Helpful tip: If you need to make a shallow copy of an array, simply use slice from
index 0 or array.slice();.
Examples:
- //Let's use this inventory array
- let inventory = ["can", "cat food", "flashlight", "wrench", "batteries"];
- //What was the 2nd and 3rd item you picked up?
- let secondThird = inventory.slice(2, 4);
- //secondThird is ["cat food", "flashlight"]
- //Let's make a copy of the inventory
- let copyOfInventory = inventory.slice();
- //copyOfInventory is ["can", "cat food", "flashlight", "wrench", "batteries"];
Notice that inventory.slice(2, 4) only returns index elements
2 and 3. It stops copying before index 4.
Slice vs. Splice Comparison:
Here's a quick example to try to illustrate how splice and slice behave differently.
- let scores = [77, 68, 93, 45, 88, 90, 98];
- let sliced = scores.slice(2, 4); //93, 45
- //scores → still [77, 68, 93, 45, 88, 90, 98]
- let spliced = scores.splice(2, 4); //93, 45, 88, 90
- //scores → now [77, 68, 98]
Functionality Comparison:
| Method | Splice | Slice |
| First parameter | Starting index | Starting index |
| Second parameter | Number of items to remove (not index) |
Ending index (not number of items) stops one element before given index number |
| If no second parameter given | Removes all items to the end of the array | Copies all items to the end of the array |
| Effect on original array | Original array is altered | Original array is not altered |
| Return value | New array containing items removed from original array | New array containing a copy of items between indexes |
| New items | New items can be added to array | New items cannot be added to array |
| When to use | You want the array to be changed | You don't want the array to be changed |