Hey everyone! Hope y'all doing great! I was working with some array methods recently and I can't believe myself how many times I've googled about the confusion that comes from the splice and slice methods.
It's pretty obvious that they have very distinct jobs to do, but not why they have such a similar name! And more than anything, even after months of writing the same methods I end up forgetting what they mean.
This is just my over-inquisitiveness, kicking my ass.
(I honestly don't know what caused that peak!) So, as of all things in my life, I sat down to make things simpler and easier for me to remember.
First things first
As all things in JS are mostly English, so let's know what both mean, literally!
Slice
"a thin, broad piece of food, such as bread, meat, or cake, cut from a larger portion"
Don't grab your plates, we're not done here yet.
Splice
"a join consisting of two ropes, pieces of tape or timber, etc. joined together at the ends."
And it's just a join among two things. Let's go nuts, now!
What is array.slice?
It's simply a method on an array, like our good old forEach or push, etc. And it can be very useful for us, which will be obvious to you in a few seconds.
So, all that slice does is, create a new array for you from a pre-existing array with your desired length of values and return that for further use.
You'll need it when you'll want to COPY your ARRAY.
Copy the full array
let flowers = ["Rose", "Tulip", "Daffodil", "Sunflower", "Bluebell", "Snowdrop"];
let all = flowers.slice(0);
// all = ["Rose", "Tulip", "Daffodil", "Sunflower", "Bluebell", "Snowdrop"]
Copy specific part of an array
let flowers = ["Rose", "Tulip", "Daffodil", "Sunflower", "Bluebell", "Snowdrop"];
let yellow = flowers.slice(1, 4);
// yellow = ["Tulip", "Daffodil", "Sunflower"]
NOTE: To find out how many items the new array should contain, you can simply do (end - begin) which are the index passed into the slice method.
Aha moment?
Alright now after finally wrapping my head around it, I figured there's a cooler way to make things less confusing.
You see, slice method basically copies some elements out of an array for you and that's literally what slice means. It's just a copy of a smaller size from something bigger than itself and you can make lots and lots of these.
Well, this can sound absurd to you and yes it is, but it's actually nice of a way to make things easier for your mind to wrap around it.
What is array.splice?
Chill! It's just another method. And you are going to need it when you will want to modify an existing array.
By modify, I mean you can change the constituents of an array by either replacing its items, and also you can add new elements wherever in the array you like!
You'll need it when you'll want to EDIT your ARRAY.
Removes none and Adds Two
let fruits = ["apple", "banana", "orange", "mango"];
let deleted = fruits.splice(1, 0, "pineapple", "jackfruit");
// deleted = []
// fruits = ["apple", "pineapple", "jackfruit", "banana", "orange", "mango"]
Removes All starting from Index 1
let fruits = ["apple", "banana", "orange", "mango"];
let removed = fruits.splice(1);
// removed = ["banana", "orange", "mango"]
// fruits = ["apple"]
Removes Three from Index 1
let fruits = ["apple", "banana", "orange", "mango"];
let customRemove = fruits.splice(1, 3);
// customRemove = ["banana", "orange", "mango"]
// fruits = ["apple"]
Aha moment?
You can clearly see, all that splice does is modify an array by joining some more elements inside it, anywhere you like, and also throw some of them out. And this is literally what splice means and the picture says it all.
Off we go!
Cool! So, now you've got this great analogy that can differentiate the meaning of both methods to you and maybe save yourself a bit of time from Googling about this, next time!
If you liked this post, you might love what I tweet as well. Let's catch up!
Top comments (2)
Thank so much. I ´ m nubie i can confirm that it’s well explained.
But i think you should specify for the slice method the last index is for the element at this index-1.
My english is not top but The idea to show that the last is for the precedent element.
Thank you, Pheno. I'll mention that in an edit, however I hope the diagram is consice. As a matter of fact, also I'm not a native English speaker, but I just love to write more. 😛