When (if ever) would you use splice instead of slice in Javascript? (best practices)

Question

I've been learning about functional programming concepts. One of the core concepts I've read is the importance of limiting the number of functions that modify an external variable to avoid unexpected potential bugs later down the road. With that in mind, the material I've been reading has recommended the use of slice over splice as slice outputs a new array without modifying the existing one, where splice will modify the existing array.

Considering that you can do everything with slice that you can do with splice (given it takes a couple extra lines of code), when would you ever use splice over slice to modify an array? I'm wondering what kinds of scenarios I should consider using the splice method in. My main considerations are that splice may be more memory or CPU efficient to call when dealing with large arrays, since it just removes the value without having to store a "before" and "after" variable holding both sections of the array surrounding the value you wish to remove and then concatenating them back together. Also, it sounds like it could be more memory and CPU inefficient to use slice and would become even more of a bad idea, the larger the array is (a linear function of increased computational power used). But, perhaps my considerations are wrong or there are other cases I haven't thought of. Any feedback is more than welcome. I'm just trying to gain a deeper understanding of when the "pure functions" (functions that don't modify external variableS) concept is not applicable or isn't best use.

Here's an example of how I see slice as functionally capable of doing everything splice can:

 array = [1,2,3,4,5]; //using the splice method array.splice(3,1); // array is now [1,2,3,5] //using the slice method function replaceSplice(arr){ let sliceBefore = arr.slice(0,3); let sliceAfter = arr.slice(4); let modifiedArray = sliceBefore.concat(sliceAfter); } replaceSplice(array); // returns a new array called modifiedArray with the values [1,2,3,5]

Answer 1

With .slice , you're creating two copies of the array and then merging them. That's not very optimal, .splice on the other hand can be as fast as the underlying array implementation is.

Additionally in general, it's usually better to have methods that do what they say, even if there's an alternative. Both .slice and .splice could be reimplemented using a simple for loop, but both are nice to have for various purposes.

Answer 2

splice is mutating existing array whereas slice creates a shallow copy of the array. Use splice when you want to add/delete items from the original array. Use slice when you want to copy the array.

In old js days slice was used to copy arguments into an array

function () {
  typeof arguments.map; // => 'undefined'
  var copy = [].slice.call(arguments);
  typeof arguments.map; // => 'function'
}

You can't insert items in the array with slice, but you can do it with splice. Example from MDN :

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at index 4

Use like push

months.splice(months.length, 0, 'May');
// expected output: Array ['Jan', 'March', 'April', 'June', 'May']

Choosing whether to use mutation or not can depend on different factors. But in general, try to avoid mutation in code. Immutable code is less error-prone, easy to test and produces fewer side effects.

Answer 3

So I have an application written in PHP that naturally uses JS on the front end. This app allows a user to query the students within a school and district. So the flow goes: choose your district, that sends an ajax call to the server to retrieve the schools associated with that district. This then populates the next select field with the appropriate schools based on the district filter. Then based on the school selected, it sends an ajax request to get all the students in that school. The app sends back an array of schools and students that i loop over in the options. So if I had a check box on each to hide a particular school or hide a particular student for some reason, I could use splice to remove it from the array without another query to the server. The only reason i'd feel comfortable doing this is because I can just regenerate that array with a new query. I personally have never had a use case for splice on a hardcoded array that wasn't generated from a query of some kind. I'm curious to see if other users have a solid use case for it myself. Interesting question.

Answer 4

Considering that you can do everything with slice that you can do with splice (given it takes a couple extra lines of code), when would you ever use splice over slice to modify an array?

First of all slice can't do what splice does and splice can't do what slice does. The important difference is that splice modifies the array in-place and cannot create a shallow copy while slice can't modify the array in-place and always creates a shallow copy.

A good example of both would be having a function that accepts an array as parameter and does some sort of transformation:

 function someTransformation(array) { // Slice the array to create a shallow copy, if you don't do this // the input array will be modified which the caller might not // expect. array = array.slice(); for (let i = array.length; i >= 0; --i) { // Since a copy of the array is used we can modify the array however // we want without modifing the original. Splice let us insert an // element around each element of the original array with ease. array.splice(i, 0, '-'); } return array; } const array = [1,2,3,4,5]; console.log(someTransformation(array)); console.log(array);