Little chit-chat
Hi! Let me keep you up-to-date with things that were rolling lately. As I’ve said previously, I finally updated my blog. I wanted to give it a more sleek and personal look. The old one was good but a little bit cold without any personal touch. So here it is, a new looking blog is finally up and running.
Not just that, I’ve moved to ConvertKit from MailChimp. Which seems much easier and better suited for my needs.
And finally, I’ve some more stuff to come in near future and I am really pumped-up about them, but unfortunately, I cannot talk about them right now. Stay tuned anyway!
Oh and subscribe to my mailing lists to be the first one to find out.
Now let’s get back to the topic.
What do they do?
While they both have similar names they do pretty much different things with array.
Yes, they both can remove elements from the array but that’s where all similarities end. I mean, even removing elements from an array is different between these two functions.
As stated above, Splice and Slice are used to remove elements from an array but Splice has some more functionalities in its sleave.
For example, with Splice, you can even add elements to your array. And if you wonder how Splice differs against Push or Unshift, let’s write it here*:*
- Push
- adds elements to the end of an array
- Unshift
- adds elements to the beginning of an array
- Splice
- add elements to the middle of an array
How does Splice differ against Slice?
Now let’s get back to the core differences between the two.
As you probably know (or don’t know), objects and arrays are referenced types, which means we get a pointer to that object or an array.
We get a reference to an existing object. Meaning we can only change the properties of an existing object not what it’s pointing to. But more about referencing in one of my next posts.
Anyways, the core difference between the two is this:
- With Splice we mutate the original data
- With Slice we create a new copy of the original data and then manipulate the data
ReactJS issue with Splicing original data
Why is this difference important? It’s becoming pretty obvious if you use state in ReactJs.
Binding original data to a state and then manipulating it, leads to unexpected errors/bugs. That’s why it’s a bad practice to use splice directly with original data, especially in React.
In order to make it a good practice we firstly create new data with copied values of original data via slice and then we can use splice if we want to.
Syntax difference between Splice and Slice
We saw the above core differences between the two. Let’s go a little bit further with more obvious syntax differences.
Syntax Splice
array.splice(index, howmany, item1, ….., itemX)
What do these syntax differences mean? Well, if you are using splice you will get as a result, an array of removed elements starting from the index.
i.e.:
let arrayData = [1,2,3,4,5]
arrayData.splice(3); // Every element starting from index 3 (including element at index 3), will be removed
console.log(arrayData); // will output: [1,2]
let returnedArray = arrayData.splice(3);
console.log(returnedArray); // will output: [4,5]Syntax Slice
array.slice(start, end)
As you have probably guessed it, this function will slice the array from index start until index end. But there is one cavity, it will not include the index end element!
i.e:
let array = [1,2,3,4,5];
let slicedArray = array.slice(1,3);
console.log(slicedArray); // will output new array with elements: [2,3]
You need to hence that the slice method doesn’t include the last element.
Oh and one more thing, regarding the Slice method. If you use the Slice method without parameters you will get a new array with copied values.
i.e:
let array = [1,2,3,4,5]; // output: [1,2,3,4,5]
let newArray = array.slice(); // output: [1,2,3,4,5]
Why is this important? Well it’s important because the newArray is not referenced to the old array.
Now, if you are coming from ReactJS and use state, you will see that the good practice is to create a new array from the state array and manipulate it.
i.e.:
// The GOOD practice is to create a copy of an array and we do it with SLICE method
// SLICE without argument copies full array and stores it into new one
const arrayData = this.state.arrayData.slice;
//then we can manipulate the new one like
arrayData.splice(arrayDataIndex,1);
//and use React state without any worries
this.setState({arrayData: arrayData});
The alternative, which is a more modern one is by using the spread operator, which basically does the same.
i.e.:
//alternative to Slice is Spread operator
const arrayData = [...this.state.arrayData]; // this does create a NEW list of elements with old array data - equivalent to slice method
Let’s sum up these two!
SUMMARY
Slice ( )
- Copies elements from an array
- Can be used without any params (it then just create a new variable with copied values)
- Returns sliced elements as a new array
- Doesn’t change the original array
- Starts slicing until of “end” given index: array.slice (start, end)
- Slice doesn’t include the “end” index parameter
- Can be used for array and string
Splice ( )
- Adds/removes elements from an array
- Returns an array of removed elements
- Mutates (changes) the array
- For adding elements: array.splice (start index, howMany from startIndex, elementToAdd)
- For removing elements: array.splice (start index, howMany)
- Can only be used for arrays
