An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Javascript .slice() and .splice() cheat sheet
I recently came across a twitter post where the user challenged others if they knew the difference between the js methods .slice() and .splice() without googling them. A lot of people mixed them up.
So I've created this simplified cheat sheet of everything you need to know about the 2 methods.
What you should know
.slice() and splice() are both array methods.
both of them return arrays as outputs
the key is to pay attention the what they return as the output array and if they mutate the original array (they one on which the were applied to)
1) .slice()
.slice() returns selected elements in an array, as a new array. Selection is done by index.
.slice() does not affect the original array
With splice() you can select one or more elements.
For example: This code snippet returns 3 (which is at index 2)
[1,2,3,4,5].slice(2) // returns 3 (which is at index 2)
and this code snippet returns 2,3,4 (from index 1 to 4 exclusively)
[1,2,3,4,5].slice(1,4) // returns 2,3,4 (from index 1 to 4 exclusively)
2) .splice()
.splice modifies the original array (adds and/or removes elements from the array)
The method returns the original array **modified**
With splice you can:
- remove elements
[1,2,3,4,5].splice(3) // returns [1,2,3] (first 3 elements)[1,2,3,4,5].splice(2,2) // at position 2 remove 2 elements (returns [1,2,5])
- add elements
[1,2,5].splice(2,0,3,4) // at postion 2 add 2 elements (returns [1,2,3,4,5])
- remove and add elements at the same time
// at position 2, remove 1 elements and add 2 new items[1,2,3,4,5].splice(2,2,"HTML","CSS") // returns [1,2,"HTML","CSS",5]
Remember: .splice() mutates the array, .slice() does not!
Hope this is helpful to someone
Original Link: https://dev.to/babib/javascript-slice-and-splice-cheat-sheet-3hoi
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To