Slice() VS Splice() ➖ The most asked difference in JavaScript interviews
You might have missed answering this in your last interview. Probably, you have mixed up the differences. But now it will be your free pointer.
The two most confusing methods in JavaScript 🧐
The difference between Slice and Splice can be hard to explain, especially in the interviews. You are already a little nervous on top of that, the name and the use case of these methods are so similar, that you can mix up the differences between them.
That’s OK, It happens with some experienced developers too.
But things are going to change. You’ll learn the differences between the two methods, you’ll see them in action to get more clarity on the use cases and you’ll learn how to answer this question.
After reading this article you’ll want this question in your next interviews. It will feel like a free pointer 🎯
Let’s see some basic differences between Slice & Splice 🔍
| SN | Slice | Splice |
| 1. | It returns the selected elements as a new array object | It returns the selected elements & modifies the existing array object |
| 2. | Parameters denote the starting & ending index of the sub-array to be taken out. (end index is not inclusive) | Parameters denote the starting index, a number of items to be removed & next set of parameters are the new items to be added at the specified starting index. |
| 3. | The default value for start is ‘0’ & end is ‘n’ | If the second parameter is ‘0’, no item is deleted only new items are added to the specified index. |
Slice & Splice in action 💻
The best way to know about the working of these methods is to see them in action. The above theory will take care of you in interviews, but you need to know how to use these methods to your advantage in the real world. Let’s see one simple example for each method to get you more clarity on the difference between them.
Slice:
let arr = [1, 2, 3, 4, 5];
let arrSlice = arr.slice(1, 3);
let arrSlice2 = arr.slice();
// ending index is not inclusive
console.log(arrSlice); // [2,3]
//default values are 0 to length of array
console.log(arrSlice2); // [1,2,3,4,5]
Splice:
let arr = [1, 2, 3, 4, 5];
//starting index, number of items to remove, item to be added at starting index
console.log(arr.splice(1,2,7)); // [2,3]
// Modified the existing array and added the item at the specified index
console.log(arr); // [1,7,4,5]
// No item is deleted
console.log(arr.splice(1,0,8)); // []
// Only new item is add at specified index
console.log(arr); // [1,8,7,4,5]
Summary : Slice() 🆚 Splice()
Slice removes elements from the array using the starting and ending index as parameters and it does not manipulate the original array.
Note: Slice creates a shallow copy of the original array
Splice method takes three parameters i.e. the starting index, the number of elements to be removed, and new elements to be added. Also, it manipulates the original array itself.
If you are asked in the interview about the difference between these methods, you can tell these exact lines to your interviewer. These four lines will be enough to convince your interviewer that you came with solid preparation.
Conclusion 🏁
The code you have seen above will help you solve problems in coding challenges or wherever you require.
I hope you have got a good understanding of the topic 💪
Don’t forget to practice it yourself. Coding is all about consistent practice.
If you think this article was helpful, please leave a 👍
Comment, on which topic you want me to write the next article.
If you like info in bite-size chunks👇
Do follow me on Twitter @anuragmathews08
Happy Coding ✌️