Slice, Splice in JavaScript

JavaScript Arrays

In JavaScript arrays concept is slightly different when compared to other programming languages. In Java or other programming languages, we need to mention datatype of an array at the time of declaration and need to store data of that particular type. For example, if we declare an array of type int we need to store only integers in that array. But this concept is slightly different in JavaScript we can store any type of data in the array.

//Let's declare an array
let productDetails = []  // Now productDetails is an empty array

// Let's declare an with data populated
let productDetails = ["Colgate","2$",500, true, "description", 35]    // Now productDetails array is populated with data of different datatypes 

The above productDetails array is valid in JavaScript.

slice()
slice() method is used to extract data from given part of an array and returns a new array. It doesn't modify the actual array.

array.slice(from, upto);

from: Slice the array starting from the specified index
upto: Slice the array upto the specified index

For example:

If I want to slice the first two elements of the above productDetails array. Since as per the concept of arrays index value will be started from 0, I will take from parameter as 0 and upto parameter as 2.

array.slice(0, 2);

Now here what we should notice is. When I want to slice the first two elements, I must give the upto parameter as 2.

Note: The slice() method doesn’t include the last given element.

let new = productDetails.slice(0, 3);   // Return value is also an array

new[0] --> Colgate          // included
new[1] --> 2$               // included
new[2] --> 500              // not included

Note: Slice method is also available for strings

splice():

splice() method is used to modify an existing array like we can remove or add elements from an array. The return value of splice() method is always an array.

** Removing elements:**

For removing elements, the first parameter should be the index parameter, and the second parameter should be the number of elements to be removed:

array.splice(index, number of elements);

An index parameter is the starting point of an array from which we need to remove elements and the second parameter is the number of elements to be removed from the array. Elements which have smaller index won't be considered.

productDetails.splice(2);      // Elements from the second index will be deleted

If we don’t define the second parameter, every element starting from the given index will be removed from the array

productDetails.splice(2);   //output is ["Colgate","2$"]

Let us include the number of elements parameter in the next example.

productDetails.splice(2, 1);    // output is ["Colgate","2$", true, "description", 35] 

productDetails.splice(2, 1);    // output is ["Colgate","2$", "description", 35]

This can continue until there is no 2nd index.

** Adding elements **:

For adding elements, we need to provide 3rd, 4th, 5th parameter (depends on how many parameters to add) to the splice() method.

array.splice(index, number of elements, element, element,...);

For example, I will add elements a and b to the starting of the index

productDetails.splice(0, 0, 'a', 'b'); // output is  [a, b,"Colgate","2$", true, "description", 35]

In this way, we can add elements using the splice method.

Summary:

slice()

• Is useful to copy elements from an array
• Returns a new array
• Doesn’t modify the original array
• Slice doesn’t include “until” index parameter
• Can be used for strings not only arrays

splice()

• Used for adding/removing parameters from the array
• Returns an array of elements
• Modifies the array
• Syntax for adding elements: array.splice(index, number of elements, element)
• Syntax for removing elements: array.splice (index, number of elements)
• Cannot be used for strings