What is slice and splice function in javascript? How to use them?

The slice() method returns the selected elements in an array, as a new array object.

The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

Note: The original array will not be changed.

For Example:

Select elements from an array:

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var citrus = fruits.slice(1, 3);

The result of citrus will be:

Orange,Lemon

Splice:

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Note: This method changes the original array.

Example

At position 2, add the new items, and remove 1 item:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 1, "Lemon", "Kiwi");

The result of fruits will be:

Banana,Orange,Lemon,Kiwi,Mango //It removes Apples from position 2 and add 2 elements at the same position

array.splice(x, y) will remove y number of elements from your array starting from (and including) the position x. Splice can also be used to insert more items into the array by using 3rd or more parameters.

array.slice(x, y) will return a sub-set of y elements from the array starting from (and including) the position x. Slice method will *not* alter the original array.

In JavaScript, mistaking slice for splice (or vice versa) is a common mistake among rookies and even experts. These two functions, although they have similar names, are doing two completely different things. In practice, such a confusion can be avoided by choosing an API that telegraphs the const-correctness of the function.

Array’s slice is quite similar to String’s slice. According to the specification, slice needs to accept two arguments, start and end. It will return a new array containing the elements from the given start index up the one right before the specified end index. It’s not very difficult to understand what slice does:

An important aspect of slice is that it does not change the array which invokes it. The following code fragment illustrates the behavior. As you can see, x keeps its elements and y gets the sliced version thereof.

Although splice also takes two arguments (at minimum), the meaning is very different:

On top of that, splice also mutates the array that calls it. This is not supposed to be a surprise, after all the name splice implies it.

When you build your own module, it is important to choose an API which minimizes this slice vs splice confusion. Ideally, the user of your module should not always read the documentation to figure out which one they really want. What kind of naming convention shall we follow?

A convention I’m familiar with (from my past time involvement with Qt) is by choosing the right form of the verb: present to indicate a possibly modifying action and past participle to return a new version without mutating the object. If possible, provide a pair of those methods. The following example illustrates the concept.

Note the difference between translate() that moves the point (in 2-D Cartesian coordinate system) and translated() which only creates a translated version. The point object p changed because it calls translate. Meanwhile, the object q stays the same since translated() does not modify it and it only returns a fresh copy as the new object.

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 0, "Lemon", "Kiwi");

The result of fruits will be:

Banana,Orange,Lemon,Kiwi,Apple,Mango

array.splice(index,howmany,item1,.....,itemX)

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(1, 3);

The result of citrus will be:

array.slice(start,end)