Array.slice() vs Array.splice() in JavaScript

While working with arrays in JavaScript, two of the most commonly used methods are slice() and splice(). For the beginners, it may seem similar because they both work on arrays, and their names are very similar. But in reality, they are used for different purposes.

In this blog, you will learn both methods, slice() and splice(), with the key differences between them and the best practices while using them.

Table of Contents:

• What is an Array in JavaScript?
• slice() Method
  • Example 1: Extract Specific Portion From Array
  • Example 2: Slice from startIndex to End
  • Example 3: Using the Negative Indexes
  • When to use slice()?
• splice() Method
  • Example 1:  Remove an Element from Specific Index
  • Example 2: Insert an element without deleting
  • Example 3: Replace an Element
  • When to use splice()?
• Difference Between slice() and splice()
• Best Practices
• Conclusion

What is an Array in JavaScript?

Arrays are one of the most popular data structures in JavaScript. They are a type of object that is used to store multiple values of different data types. 

In order to manipulate arrays, you need to read, insert, remove, or replace elements. JavaScript provides two important methods for doing such manipulations. Let us discuss each of them one by one in detail:

slice() Method

The slice() method is used to extract a specific portion of an array and return it as a new array, which means it does not modify the original array. Besides that slice() method creates a new array.

Syntax:

array.slice(startIndex, endIndex);

Example 1: Extract Specific Portion From Array 

Output:

Explanation: In this example, you are using the slice method to get the specific part from an array. Here, startIndex (optional parameter) denotes the index to start extraction, and endIndex (optional parameter) denotes the index to stop extraction. The element present at the endIndex is not included in the new array.

Example 2: Slice from startIndex to End

Output:

Explanation: In this example, only the startIndex value is given, it will return you new array having elements starting from the 1st index to the last element.

Example 3: Using the Negative Indexes

Output:

Explanation: Negative indexes in JavaScript start from the last element. Thus, here -2 denotes the second-to-last element in the array.  It will return you all remaining elements starting from the index -2.

When to use slice()?

The slice() is a non-destructive method because it doesn’t make any changes to the existing array. Here are some common use cases for the slice() method:

• To create a copy of an entire array.
• To create a sub-array from an array.
• To extract elements without modifying the original array.

Design and Build Responsive Websites

Start Today

Explore Program

splice() Method

The splice() method is used to change the content of an array by removing, replacing, and inserting elements. It doesn’t create any new array. Besides this, it can make changes in the original array.

Syntax:

array.splice(startIndex, deleteCount, item1, item2, ...)

• startIndex: The index from which JavaScript starts modifying the array.
• deleteCount: It is the optional parameter that specifies the number of elements to remove.
• Items: Elements to insert at startIndex. It is also an optional parameter.

Example 1:  Remove an Element from Specific Index

Output:

Explanation: In this example, you are using the splice method for removing an element from a specific index. Here, the courses.splice(1,1) removes the element from the first index, and only one element is removed from the array because the second parameter(deleteCount) is 1.

Example 2: Insert an element without deleting

Output:

Explanation: In this example, you can insert a new element (‘CyberSecurity’) at the first index by using the splice() method.

Example 3: Replace an Element

Output:

Explanation: In this example, delete the element present at the first index (“AI”) and add two new values to the array at the same index (‘CyberSecurity’ and  ‘AR/VR’).

When to use splice()?

The splice() is a destructive method because it can make changes in the original array. Here are some common use cases for the splice() method:

• To insert elements at any position in an array.
• To remove elements by index
• To rearrange elements.
• To replace the element by combining the remove and insert both.

Difference Between slice() and splice()

Here is the key difference between the slice() and splice() methods in JavaScript:

Best Practices

The slice() and splice() methods are important and used by developers to modify the array. Here are some points that you need to remember while using slice() and splice() in your code:

• If you pass an array to functions, then it is recommended to use the slice() method. Because this can protect the original array from being accidentally changed.
• Always remember splice() method directly modifies the array. If you want to preserve the original order of an array, then don’t use splice().
• In JavaScript, you can use the slice() method to clone an entire array.
• For inserting an element at a specific index, the splice() method is used.
• Avoid using splice() in Loops because it produces unexpected results.

Conclusion

Understanding the difference between the slice() and splice() methods is important for manipulating array elements in JavaScript. The slice() allows you to create a subarray and returns the result as a new array without changing the elements of the original array. The splice() method, on the other hand, provides a dynamic way to modify the original array by inserting, deleting, or replacing its elements. If you are continuously working with JavaScript, then it is important for you to familar with the slice() vs splice() methods.

Difference Between Slice and Splice Methods in JavaScript – FAQs