Hello everyone! This post will be super short and quite comprehensive (truly hope so). I was actually selfishly in a need for that post 'cause even if I work with JS all the time, I still look up these two bad boys: slice
and splice
.
Today we're cooking:
Slice
Splice
The things to consider while working with the aforementioned methods were that both are used on arrays and both remove elements from the array. It is a little bit confusing, huh!? Why have them both then?
Okay, without further ado let's look at the aforementioned methods step by step!
Splice
When I learnt about splice
long long time ago I realized that the name of the method reminded me of comma splices from my linguistics past.
Comma splices occur when two independent clauses are incorrectly joined with a comma.
Image Source: Tolchik / iStock / Getty Images Plus
It helped me so much to wrap my mind around the method: aha-ha, so to splice is kinda "to combine".
Splice as an ordinary word is better explained with pizza:
You see how those pizza slices are all different? Like I just replaced all the parts which used to be just Margarita with a crazy mix of flavours from all over the place?
If we look at the content of splice method in a technical way, then here it is:
array.splice(start,
deleteCount, el1, el2, ..., el)
our initial array changes
start
is the index at which the array starts ‘splicing’deleteCount
is the number of values to be deleted from thestart
. If the value is0
, nothing will be deletedel1
toel
are the values that will be added after thestart
And now let's splice that pizza! I only will divide pizza in two equal flavours for you to get the idea😉
let array = ["margarita", "margarita"];
let splicedValue = array.splice(1, 1, "pepperoni");
console.log(array); // [ "margarita", "pepperoni" ]
console.log(splicedValue); // [ "margarita" ]
Look! We changed one pizza part from margarita to pepperoni!
Slice
Slice
is so popular that it's got its own page on wiki!
Oh no, that pizza's slice is being taken away! Let's see how it works in a code!
array.slice(start, end)
returns a new array of elements
start
is the index at which the array starts slicingend
is the index at which the array stops slicingthe value at the last index is excluded
let array = [ "margarita", "pepperoni" ];
let slicedArray = array.slice(1)
console.log(array); // [ 'margarita', 'pepperoni' ];
console.log(slicedArray); // [ "pepperoni" ]
We didn't change the whole pizza as you see but we still took a slice of pepperoni pizza from our mixed marvel.
Okay, to sum up, I wanted to provide you with some visuals.
Comparison Table
Opt out for now. But can’t wait to see you again soon!
Sources
Wikipedia (Array Slicing):https://en.wikipedia.org/wiki/Array_slicing
Indiana University of Pennsylvania (Comma Splices): https://www.iup.edu/writingcenter/writing-resources/punctuation/comma-splices.html#:~:text=Comma%20splices%20occur%20when%20two,to%20create%20two%20separate%20sentences
MDN Web Docs (Array.prototype.splice()): [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice]
MDN Web Docs (Array.prototype.slice()): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Top comments (4)
All the methods/functions that doesn't mutate the passed values are +1 for me :)
Understandably so actually🤓
Great explanation
I'm glad it was helpful😃