JavaScript Array Methods - Slice & Splice

Today I will write about two JS array methods that sound very similar, and they do similar things to an array as well! When I started out, I was confused about which one does what to the array, I think I have got the hang of it! 😁 Maybe... let's see if I can explain it to you.

Array.prototype.slice()

You may be able to guess what this method does to an array from the name. The .slice() method can be used to select part of an array and return it as a new array. You can also use this method to create a shallow copy of the array. Shallow copy means that if the item in the array is an object, .slice() will copy the reference to that object and changes can affect the original values. I have linked an article if you want to know more about it.

The .slice() method can take up to two integer arguments which represents the index of the array. The first argument tells the method where you like to begin the slice, and the second argument tells the method when you would like to stop (the method will not include the item at the end index).

Example 1 -

const first10digitsOfPI = [3,1,4,1,5,9,2,6,5,3];


const first3digitsOfPI = first10digitsOfPI.slice(0, 3);
console.log(first3digitsOfPI); // [3,1,4]


const copy3digitsPI = first3digitsOfPI.slice();
console.log(copy3digitsPI); // [3,1,4]


const decimalsOfPI = first10digitsOfPI.slice(1);
console.log(decimalsOfPI); // [1,4,1,5,9,2,6,5,3]

console.log(first10digitsOfPI); // [3,1,4,1,5,9,2,6,5,3]

In the above example, you can see that calling .slice() without any arguments will create a copy of the array (shallow copy). If you use one argument, the method will start slicing the array from that positional index all the way to the end. And if you use two arguments, the slicing starts at the first argument up to but not including the second argument.

If the first argument is greater than the length of the array, an empty array will be returned, and if the second argument is greater than the length, the .slice() method will go up to the end of the array.

QUESTION: What happens if the argument(s) is/are negative? 🤔...let me know what you think in the comments.

Array.prototype.splice()

The .splice() changes the array that calls the method and it returns the removed elements from the array. It can also be used to add values to the array at specific index. The method can take many arguments, but the first arguments indicate the positional index to start the splicing and the second index indicates how many elements to remove. Any additional arguments after will be the values to be added into the array at the start of the splicing. 😮‍💨 Let's see an example to better understand it.

Example 2 -

let programLang = ["HTML", "CSS", "Javascript", "Python", "Java", "GO","SQL"];

const removedLang = programLang.splice(0);
console.log(programLang); // []
console.log(removedLang);
// ["HTML","CSS","Javascript","Python","Java","GO","SQL"] 

programLang = removedLang.slice();

const removeFirstThree = programLang.splice(0,3);
console.log(removeFirstThree); // ["HTML","CSS","Javascript"]
console.log(programLang); // ["Python","Java","GO","SQL"]

programLang.splice(1,1,"C++", "TS");
console.log(programLang); // ["Python","C++","TS","GO","SQL"]

In the example, the first splice removed every element from index 0 to the end of the array, this happens when no second argument is given. Then, we used .slice() to copy the array back to the original state. After that, starting from positional index 0, remove 3 elements. Lastly, the final splice, we started at positional index 1, removed 1 item and added 2 new elements into the array.

Summary

To summarise, if you intend to change the original array, you should use .splice(), however if you wish to keep the original array the same, you should use .slice(). Of course, you can combine the two as you see fit. .slice() obtain a sub-set of the array from a given index to a given index, and return as a new array. However, .splice() changes in-place and allow for adding as well as removing elements from the array at starting at a given index.

I hope that clears up what is .slice() and what is .splice().

Thank you for reading, and as always, please leave a comment if I have misunderstood any concept or if the post is unclear. 👍