April 19, 2023

What is the Difference Between Slice and Splice in Javascript

By Krishnaa JavaScript Questions 0 Comments

Javascript is a widely-used programming language that is popular for its versatility and simplicity. In javascript, there are many built-in functions that make it easy for developers to manipulate arrays. Two of the most commonly used array manipulation functions are slice() and splice(). Despite having similar names, these functions are used for different purposes. In this tutorial, we will explore the difference between slice and splice in javascript.

slice() in javascript

The slice() method returns a new array that contains a portion of the original array. The original array is not modified. The slice() method can take two parameters: start and end. The start parameter is the index at which to begin extraction, and the end parameter is the index at which to stop extraction. If the end parameter is not specified, slice() will slice until the end of the original array.

Here is an example of using slice() in javascript:

const originalArray = ['a', 'b', 'c', 'd', 'e'];
const slicedArray = originalArray.slice(1, 4);
console.log(slicedArray); // Output: ['b', 'c', 'd']

In the above example, slice() is used to create a new array called slicedArray that contains the elements from the originalArray starting at index 1 (inclusive) and ending at index 4 (exclusive).

splice() in javascript

The splice() method is used to add or remove elements from an array. Unlike slice(), splice() modifies the original array. The splice() method can take three parameters: start, deleteCount, and itemsToAdd. The start parameter is the index at which to start modifying the array, the deleteCount parameter is the number of elements to remove from the array, and the itemsToAdd parameter is a list of elements to add to the array.

Here is an example of using splice() in javascript:

const originalArray = ['a', 'b', 'c', 'd', 'e'];
originalArray.splice(1, 2, 'x', 'y', 'z');
console.log(originalArray); // Output: ['a', 'x', 'y', 'z', 'd', 'e']

In the above example, splice() is used to remove two elements starting at index 1 and replace them with the elements ‘x’, ‘y’, and ‘z’. The originalArray is modified to contain the new elements.

Key Differences Between slice() and splice()

The following are the main differences between slice() and splice() methods in javascript:

Return Value: slice() returns a new array that contains a portion of the original array, whereas splice() modifies the original array and returns the removed elements (if any) as a new array.
Modifies Original Array: slice() does not modify the original array, whereas splice() does.
Parameters: slice() takes two parameters: start and end, whereas splice() takes three parameters: start, deleteCount, and itemsToAdd.
Usage: slice() is used to extract a portion of an array, whereas splice() is used to add or remove elements from an array.

In conclusion, slice() and splice() are two important methods in javascript that can be used to manipulate arrays. Understanding the differences between the two is crucial for efficient programming. slice() is used to extract a portion of an array, while splice() is used to add or remove elements from an array. It’s important to note that slice() returns a new array, while splice() modifies the original array. By keeping these differences in mind, you can use these methods effectively in your javascript programs.