splice vs. slice in JavaScript
slice and splice are methods used on JavaScript arrays to retrieve certain elements or remove elements from the array. They can be confusing sometimes, but we’ll be looking at the methods in detail to get a better picture.
slice
The term slice literally means to cut something into pieces. It is used to cut out elements from an array. It does not affect the original array.
Syntax
array.slice(start, end)
startdenotes the index at which the array starts slicing.enddenotes the index at which the array stops slicing.
Return value
The returned value of the slice method is an array of the values found between start and end excluding the value at end.
If end is not specified, the length of the array would be used. Hence, all values from the start index would be returned.
Example
let arr = ["educative",4,[1,3],{type: "animal"}];let slicedValues = arr.slice(1,3);console.log(arr);console.log(slicedValues);
As stated in the syntax above, 1 is the starting index and 3 is the ending index.
At arr[1], the value is 4. At arr[3], the value is {type: "animal"}. The values between these two values are [1,3]. Therefore, the returned value would be the subarray [4, [1,3]]. Remember, the value at the last index is excluded.
But arr retains its values.
splice
Splice, according to the dictionary, means to join things together. It is used to remove elements from an array or replace them.
Syntax
array.splice(start, deleteCount, newElem1, newElem2, ..., newElemN;
startdenotes the index from which the method will start its operation on the array.deleteCountdenotes the number of values to be deleted from thestart. If the value is0, nothing will be deleted.newElem1tonewElemNdenote the values that would be added after thestart.
Return value
The returned value is the values that are affected,i.e., deleted. If deleteCount is 0, an empty array would be returned.
Example
let arr = ["educative",4,[1,3],{type: "animal"}];let returnedArr = arr.splice(2,1,{name: "educative"});console.log(arr);console.log(returnedArr);
arr, the original array, is modified and becomes:
[
"educative",
4,
{name: "educative"},
{type: "animal"}
]
start is 2, deleteCount is 1, newElem1 is {name: "educative"}. At arr[2], the value is [1,3]. 1 item is deleted from the array which is [1,3]. newElem1 is then added immediately after the start. Since start is removed, newElem replaces it.
returnedArr is [[1,3]], which contains the value that was affected.
Wrap up
slice returns a piece of the array but it doesn’t affect the original array. splice changes the original array by removing, replacing, or adding values and returns the affected values.
When you use each one is up to you. If you have to alter the content of the array, splice is the way to go, but if you just want to obtain a subarray, slice should be your choice.
RELATED TAGS
CONTRIBUTOR
Dillion Megida