In this post, we are going to know the difference between JavaScript : Array.splice() vs Array.slice().
Slice
Slice is an array method to manipulate the arrays. In arrays slice() method returns the selected elements in an array, as a new array object. It extracts the characters of an array and returns the extracted characters as an new array. It has two parameters ‘Start’ and ‘End’.
The slice( ) method copies a given part of an array and returns that copied part as a new array. It doesn’t change the original array.
array.slice(from, until);
- From: Slice the array starting from an element index
- Until: Slice the array until another element index
For example, I want to slice the first three elements from the array above. Since the first element of an array is always indexed at 0, I start slicing “from”0.
array.slice(0, until);
Now here is the tricky part. When I want to slice the first three elements, I must give the until parameter as 3. The slice( ) method doesn’t include the last given element.
var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.Splice
Splice is an array method, which is used to add/remove the new elements to an array.
The name of this function is very similar to slice( ). This naming similarity often confuses developers. The splice( ) method changes an array, by adding or removing elements from it. Let’s see how to add and remove elements with splice( ):
Removing Elements
For removing elements, we need to give the index parameter, and the number of elements to be removed:
array.splice(index, number of elements);
Index is the starting point for removing elements. Elements which have a smaller index number from the given index won’t be removed:
array.splice(2); // Every element starting from index 2, will be removed
If we don’t define the second parameter, every element starting from the given index will be removed from the array.
var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
console.log(array);
// shows [1, 2], original array altered.
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
console.log(array2);
// shows [6,7,9,0]
var array3=[11,12,13,14,15];
console.log(array3.splice(2,1,"Hello","World"));
// shows [13]
console.log(array3);
// shows [11, 12, "Hello", "World", 14, 15]
-5 -4 -3 -2 -1
| | | | |
var array4=[16,17,18,19,20];
| | | | |
0 1 2 3 4
console.log(array4.splice(-2,1,"me"));
// shows [19]
console.log(array4);
// shows [16, 17, 18, "me", 20]
