Hello Everyone! Welcome back to the third article on the Array method series. This series is all about explaining the JavaScript array methods and if you are new to the series, you can check out the previous articles:
Recap
On the previous articles, we looked into the common javascript array methods(push(), pop(), unshift(), shift()). As we learned, they are used especially when dealing with the first and last elements in an array.
In this episode, we will look into the Array.splice and Array.slice() methods. As you can see, their names look quite similar and I have seen a lot of devs complain about how the two methods confuse them. But, with a closer look at them, you will understand how both work and also their differences. Let's dive into it 👇👇
Both array methods work with array indexes and just to remind you that array indexes start from 0
Array.splice()
The array.splice() method returns the removed item(s) in an array. This method changes the original array. It specifically takes three(3) parameters but the third parameter is for adding new items to the array so it can be more than one. Let me explain:
Syntax
array.splice(startindex, numberOfElementsToBeRemoved, newItems)
- The first parameter is the array index which specifies the position to start removing/adding the item(s).
- The second parameter is the number of items to remove from the array (remember not index). If set to zero(0), no item will be removed and if not passed, all item(s) from the provided index will be removed.
- The third parameter is for the new item(s) to be added into the array. This is completely optional in case you don't want to add anything. You can add anything like string, number, or boolean values. Let's take a look at code examples
let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.splice(3,4)) //returns the removed items as a new array [4,5,6,7]
console.log(num) //returns the altered original array [1,2,3,8,9,10]
let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.splice(3,4, 'new', 'item')) //returns the removed items as a new array [4,5,6,7]
console.log(num) //returns the array with the added items [1,2,3,'new','item',8,9,10]
Array.slice()
This method returns the selected element(s) in an array, as a new array object. This method doesn't change the original array (the original array is left untouched) and it takes just two parameters. It deals with only the array indexes which is one major difference it has from the splice() method.
Syntax
array.slice(start, until)
- The first parameter is the index at which to begin the extraction.
- The second parameter is the index at which to end the extraction. If this parameter is omitted, all elements from the start of the array to end will be selected. The element at this position won't be selected Let's see an example
let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.slice(3)) //doesn't have the last parameter so it retunns all the selected item [4,5,6,7,8,9,10]
let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.slice(2,5)) //starts from index 3 until index 5 but won't select the element at index 5. returns [3,4,5]
Conclusion
Yeah, both methods can be truly confusing but with constant practice, you totally grasp how both of them work. Thanks for reading and please leave an emoji and share if it is helpful. Feel free to ask any questions in the comments below if you're unsure of any concept. Cheers! 🎉🎉🎉🎉🎉🎉🎉