Splice vs Slice in JavaScript

JavaScript arrays are special objects with predefined properties. These are the numeric properties that can be assigned to values ​​passed as input parameters. JavaScript provides several methods for working with arrays. Some of the more popular array methods are .push(), .pop(), .reverse() etc. All of these methods will change the array.

In this article, we will learn the difference between splice and slice in JavaScript.

splice() vs slice() in JavaScript

splice()

The splice() method affects or modifies the content of an array. It either removes or replaces existing elements and/or adds new elements in place.

Syntax:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

The JavaScript Splice method has three parameters, the first of which is start. It is a required parameter that specifies the starting position/index of an array at which to begin modifying the array. If it is greater than the array’s length, the start is set to the length of the array.

In this case, no elements are removed, but the method behaves like a summation function, adding as many elements as [n*] elements are provided. If it’s negative, it starts with that many elements at the end of the array.

The second parameter is deleteCount, which is an optional parameter. This parameter specifies the number of elements in the array to be deleted from the beginning. If deleteCount is omitted or its value is equal to or greater than array.length - start, then all elements from the beginning to the end of the array are deleted 0 or negative, no items are deleted. In this case, you have to enter at least one new article.

The third parameter is item1, item2, ... which is an optional parameter. This parameter specifies the elements to be added to the array, starting at the beginning. If you do not specify an item, splice () only eliminates elements of the array.

This method returns an array containing the deleted items. An array of one element is returned if only one element is deleted. An empty array is returned, if no element is deleted. For more information, read the documentation of the splice method.

const osConfig = ['Linux', 'Ubuntu', 'MacOS', 'Windows'];
console.log(osConfig, osConfig.splice(0, 2));

In the above example, we have specified the different types of Operating systems. When you try to extract the open-source OS, it will affect the original osConfig array and returns an array that does not contain the name of the open-source OS. When you run the above code in any browser, it will print something like this.

Output:

["MacOS", "Windows"], ["Linux", "Ubuntu"]

slice()

The slice() method returns a shallow copy of part of an array into a newly selected array object from start to finish, where start and end are the indexes of the elements in that array. The original array will not be affected or modified. The splice() method can take n number of arguments, and the slice() method accepts 2 arguments.

Syntax:

slice()
slice(start)
slice(start, end)

The JavaScript slice() method contains two parameters, among which start is the first parameter, an optional parameter. This parameter specifies the index at which to start extraction. This index starts from 0. The default value for start is always 0. If the start is greater than the length of an array, an empty array is returned.

The second parameter is an end, an optional parameter. This parameter specifies the endpoint where extraction needs to end. slice extracts up to the index specified but not including the end. For example, if the end is n, the last element extracted is n-1. If the end is not specified, the slice method extracts through the end of the array.

This method returns a new array containing the extracted elements. For more information, read the documentation of the slice method.

const osConfig = ['Linux', 'Ubuntu', 'MacOS', 'Windows'];
console.log(osConfig, osConfig.slice(0, 2););

In the above example, we have specified the different types of Operating systems. When you try to extract the open-source OS, it will not affect the original osConfig array, but instead, it will create a new array that contains the name of the open-source OS. When you run the above code in any browser, it will print something like this.

Output:

["Linux", "Ubuntu", "MacOS", "Windows"], ["Linux", "Ubuntu"]