Storytime

I wanted to trim a string at multiple places and for that, I was using splice and slice interchangeably without knowing their actual usage and then things started to break. So I read about them and thought I should share them with you guys too.

I found MDN Docs a bit complex to understand that's why I'm writing this, trying to simplify for others and myself.

Splice

splice returns an array of REMOVED elements and MUTATE the original array

array.splice(n) —> will remove all elements after nth index, and return the removed elements in an array.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.splice(2)); //[ 2, 3, 4, 5, 6, 7, 8]

array.splice(a,b) —> will remove b number of elements from the ath index, and return the removed elements in an array

const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.splice(3, 5)); //[ 3, 4, 5, 6, 7]

array.splice(a,b,c) —> here a and b are indexes, and c is an element. This will remove elements from index a to b, including them and will return them in an array. And add the element c in the place of a to b elements. Remember, this returns an array of removed elements so you won’t be able to see the added element in the returned array.

const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.splice( 3, 5, "surprise")); //[ 3, 4, 5, 6, 7]
console.log(array); //[ 0, 1, 2, 'surprise', 8]

If you want to add more than one element then just keep on passing them, from third argument onwards everything will act as elements to be added in the array.

Now let’s get to a bit tricky part, if in a single argument you pass a negative number, then it will convert it into m = array.length - n , and then remove all the elements after m number of elements and return an array of removed elements.

Now the easier way to remember is that if a negative number n is passed then it will return n number to elements from the last index.

const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.splice(-4)); //[ 5, 6, 7, 8]

If negative number is passed as second argument then no elements will be removed, and will return an empty array. If first is negative and second is positive then it will act as only the first argument is passed and will ignore the second argument.

const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.splice(-4, 6)); //[ 5, 6, 7, 8]

Once again repeating important this, splice will change/modify/mutate the original array.

Slice

slice return an array of SHALLOW COPY of the elements from start to end (end not included) and DO NOT MUTATE the original array.

However, I want you to focus on the word shallow copy, it means that if you change anything in the returned array then the original array will also be changed.

array.slice() —> will return the array as it is.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.slice()); //[0, 1, 2, 3, 4, 5, 6, 7, 8]

array.slice(n) —> will return an array starting from the nth index till the last element.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.slice(6)); //[6, 7, 8]

array.slice(a,b) —> will return an array starting from the ath index till bth index, not including the element at bth index.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.slice(2, 6)); //[2, 3, 4, 5]

If in a single argument you pass a negative number, then it will convert it into m = array.length - n , and then return all the elements after m number of elements.

Now the easier way to remember is that if a negative number n is passed then it will return n number to elements from the last element.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.slice(-5)); //[4, 5, 6, 7, 8]

If a is positive and b is negative then first a number of elements are removed and b number of elements from the last elements are removed from the array and the remaining array is returned.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
console.log(array.slice(2, -3)); //[2, 3, 4, 5]

If both arguments are negative then an empty array is returned.

Once again repeating important this, splice WILL NOT change/modify/mutate the original array, but changing/modifying/mutating any one of them will affect the other one.

Hope this helped you. Happy coding !!