JavaScript Array Slice vs Splice

JavaScript Array Slice vs Splice | Variables that may store many values in JavaScript is called arrays. These arrays are connected in a wide variety of ways. For array manipulation, the techniques slice() and splice() are frequently employed. Once we comprehend JavaScript’s built-in methods well, they are quite helpful when we write code. In this piece, We will go through two of them: the slice() and splice() methods. Perhaps because of how similar their names are, even seasoned coders frequently get them wrong.

JavaScript arrays can be retrieved or have elements removed using the functions slice and splice. They can occasionally be difficult to understand, but we’ll be going over the procedures in depth to clear things up.

Slice:- Basically, the word “slice” implies cutting anything into pieces. It is employed to remove objects from an array. It has no impact on the initial array.

Syntax:-
array.slice(start, end)
Here,
start – Indicates the index where the array begins to slice, including.
end – The index where the array terminates slicing is indicated by the end, excluding.

Splice:- The dictionary definition of “splice” is “to bind things together.” It is used to add or take away elements from an array.

Syntax-
array.splice(start, deleteCount, newElem1, newElem2, …, newElemN);
Here,
start – Indicates the position in the array at which the method will begin working on it.
deleteCount:- The number of elements to be deleted.
newElem1, newElem2, …, newElemN:- New elements to be inserted.

The quantity to be eliminated from the beginning is indicated by the value deleteCount. Nothing is erased if the start value is 0. The data that will be provided after the start is designated by newElem1 through newElemN.

Difference Between JavaScript Array Slice vs Splice

Slice can be used to pick a sub-array from an existing array to create a new array. The original array does not reflect the adjustments. A new array parameter has to be created and assigned the output.

A new array containing the values from the chosen sub-array of the original array is the output value. The values starting at the start and ending at (end-1) will be chosen.

let arr = ["Know Program", 93, [2, 0], { type: "website" }];
let slicedVal = arr.slice(1, 3);
console.log(arr);
console.log(slicedVal);

Output:-

[ ‘Know Program’, 93, [ 2, 0 ], { type: ‘website’ } ]
[ 93, [ 2, 0 ] ]

The starting index is 1 and the concluding index is 3, as indicated in the code given.

The value at arr[1] is 93  The value at arr[3] is “type: website.” These two parameters are separated by the values [2,0]. As a result, the subarray [93, [2,0] ] will be the value given. Keep in mind that the value at the last index is disregarded. However, arr continues to uphold its values.

Using the Splice method, an item can be added to or removed from the provided array.

It is not necessary to assign the outcome to another new variable. An array holding the removed element is the return value.

let arr = ["Know Program", 93, [2, 0], { type: "website" }];
let returnedArr = arr.splice(2, 1, { name: "Know Program" });
console.log(arr);
console.log(returnedArr);

Output:-

[ ‘Know Program’, 93, { name: ‘Know Program’ }, { type: ‘website’ } ]
[ [ 2, 0 ] ]

The starting index is indicated by parameter I and the number of items to be eliminated are indicated by “n.” The list of new items to be inserted at the specified index is represented by “item 1, item 2,…..item n.” No item is eliminated if n=0; instead, the additional items are simply added to the starting index.

Here “start” value is 2, deleteCount is 1, and newElem1 is “Know Program.” The value at arr[2] is [2,0]. The array has one item removed, which is [2,0]. Then, right after the “start”, newElem1 is introduced. The newElem takes the start’s place as it has been eliminated.

The value that was influenced is contained in returnedArr, which is [ [2,0] ].

let arr = ["Know Program", 93, [2, 0], { type: "website" }];
let returnedArr = arr.splice(1, 0, 50, { name: "Know Program" });
console.log(arr);
console.log(returnedArr);

Output:-

[
‘Know Program’,
50,
{ name: ‘Know Program’ },
93,
[ 2, 0 ],
{ type: ‘website’ }
]
[ ]

In the above program, deleteCount is 0. Therefore no elements are removed. And two new elements are inserted at index 2 using the splice() method. It is an example of the insert operation in an array at the given index in JavaScript.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Leave a Comment

Your email address will not be published. Required fields are marked *