At first glance, these methods might seem interchangeable, but they actually have distinct differences that can impact your code.
In this article, we'll explore the differences between slice and splice, and provide you with some exciting code examples to help you understand how to use them properly.
Slice and Dice with Slice
The syntax for the
slice method is straightforward:
You specify the starting and ending indexes of the array subset you want to keep, and
slice creates a new array containing those elements, leaving the original array untouched.
const fruits = ['apple', 'banana', 'orange', 'kiwi', 'mango']; const slicedFruits = fruits.slice(1, 4); console.log(slicedFruits); // ['banana', 'orange', 'kiwi']
In this example,
slice is used to create a new array called
slicedFruits, which contains elements from index 1 (inclusive) to index 4 (exclusive) of the
fruits array. The original
fruits array remains unchanged, and we can now work with the
slicedFruits array however we like!
When to Use Slice
slice when you want to create a new array that contains a subset of elements from an existing array, without modifying the original array.
This is useful when you need to work with a specific subset of elements from an array, but you don't want to affect the original array.
For example, let's say you have an array of numbers representing the ages of people in a class:
const ages = [18, 20, 22, 19, 21, 25, 24];
If you want to find out the ages of the three youngest people in the class, you can use
slice to create a new array containing just those elements:
const youngestAges = ages.slice(0, 3); console.log(youngestAges); // [18, 20, 22]
Now you can work with the
youngestAges array without affecting the original
Splice Things Up with Splice
The syntax for
splice is slightly more complex:
array.splice(startIndex, deleteCount, item1, item2, ...)
You specify the starting index of the array subset you want to modify, how many elements you want to remove (if any), and what new elements you want to add to the array.
const fruits = ['apple', 'banana', 'orange', 'kiwi', 'mango']; fruits.splice(2, 1, 'grape', 'pear'); console.log(fruits); // ['apple', 'banana', 'grape', 'pear', 'kiwi', 'mango']
In this example,
splice is used to remove one element at index 2 of the
fruits array and add two new elements
'pear' at the same index. The
fruits array is now modified directly, and we can continue working with the new and improved array.
When to Use Splice
splice when you want to modify an existing array by adding or removing elements from it. This method makes it possible for you to insert or remove specific elements from an array, or when you want to reorder the elements in an array.
For example, let's say you have an array of colors:
const colors = ['red', 'green', 'blue', 'yellow'];
If you want to remove the
blue elements from the array, you can use
colors.splice(1, 2); console.log(colors); // ['red', 'yellow']
colors array only contains
yellow. Alternatively, let's say you want to insert a new color,
orange, into the array at index 2:
colors.splice(2, 0, 'orange'); console.log(colors); // ['red', 'yellow', 'orange']
colors array contains
orange, and the other elements have been shifted over to make room for the new element.
Slicing vs. Splicing: What's the Difference?
Here's a quick summary of the main differences between
slicecreates a new array containing the specified subset of elements, while
splicemodifies the original array directly.
sliceis an immutable method, while
spliceis a mutable method.
slicemethod returns a new array, while the
splicemethod does not.
Using the right array method can make all the difference in your code.
Try what you have learned in the interactive code editor below.