In this article, I will walk you through how to use the slice() and splice() array methods using code examples.
How to use the slice() JavaScript array method
The slice() method can be used to create a copy of an array or return a portion of an array. It is important to note that the slice() method does not alter the original array but instead creates a shallow copy.
Here is the basic syntax:
slice(optional start parameter, optional end parameter)
Let's take a look at some examples to better understand how the slice() method works.
How to use the slice() JavaScript method without the start and end parameters
In this first example, I have created a list of cities from around the world.
const cities =["Lahore","Islamabad","Karachi","Multan","Peshwar", "Quetta"];
I can use the slice() method to create a shallow copy of that array.
cities.slice()
When I console.log the result, then I will see all of the elements from my cities array copied into this new array. Just like :- ["Lahore","Islamabad","Karachi","Multan","Peshwar", "Quetta"]
How to use the slice() JavaScript method using the start parameter
You can use the optional start parameter to set a starting position for selecting elements from the array. It is important to remember that arrays are zero based indexed. In this example, we will set the start position at index 2 which will select the last three cities in the array and return them in a new array.
const newCityArr = cities.slice(2);
console.log(newCityArr)
Here is the result :- ["Karachi","Multan","Peshwar", "Quetta"]
The original array was not modified as we can see here in the above example.
How to use the splice() JavaScript array method
Unlike the slice() method, the splice() method will change the contents of the original array. The splice() method is used to add or remove elements of an existing array and the return value will be the removed items from the array.
If nothing was removed from the array, then the return value will just be an empty array. Here is the basic syntax.
splice(start, optional delete count, optional items to add)
In this example, we have an array of food items.
const food = ['pizza', 'cake', 'salad', 'cookie'];
If we wanted to add another food item to the array at index 1, then we can use the following code:
food.splice(1,0,"burrito")
The first number is the starting index, and the second number is the delete count. Since we are not deleting any items, our delete count is zero.
This is what the result would look like in the console.
`const food = ['pizza', 'cake', 'salad', 'cookie'];
food.splice(1,0,"burrito")
console.log(food)`
and result will be: ['pizza', 'burrito', 'cake', 'salad', 'cookie']
Conclusion
The slice and splice array methods might seem similar to each other, but there are a few key differences.
The slice() method can be used to create a copy of an array or return a portion of an array. It is important to note that the slice() method does not alter the original array but instead creates a shallow copy.
Unlike the slice() method, the splice() method will change the contents of the original array. The splice() method is used to add or remove elements of an existing array and the return value will be the removed items from the array.
If nothing was removed from the array, then the return value will just be an empty array.
I hope you enjoyed this JavaScript article and best of luck on your developer journey. Also don't forget to share will your friends and do also comment if you find this blog helpful.
Top comments (0)