JavaScript Array Methods: slice() vs splice()

Javascript arrays are variables that can hold more than one value. There are many methods associated with these arrays. The methods slice() and splice() are widely used methods for array manipulations.

slice

  • The slice() method is used to get a new array by selecting a sub-array of a given array.
  • The parameter ‘s’ indicates the starting index and ‘e’ indicates the ending index. They denote the index of the sub-array to be taken. By default, the value for start is ‘0’ and end is ‘n’.
  • The changes do not reflect in the original array.
  • The result has to be assigned to a new array variable.
  • The return value is a new array with the values in the selected sub-array of the given array. The values in the range start to (end-1) will be selected.
  • Takes exactly 2 arguments

Syntax: array_name.slice(s, e)

Parameter Details:

  1. Required. An integer that specifies where to start the selection (The first element has an index of 0). Use negative numbers to select from the end of an array.
  2. Optional. An integer that specifies where to end the selection but does not include. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.
Examples: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.

var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]

console.log(array2.slice(-2,4)); //array2.slice(length-2,4)
// shows [9] - //array2.slice(3,4)

console.log(array2.slice(-3,-1)); //array2.slice(length-3,length-1)
// shows [8, 9] - //array2.slice(2,4)

console.log(array2);
// shows [6, 7, 8, 9, 0]

splice

  • The splice() method is used to add/remove an item from the given array.
  • The parameter ‘i’ denotes the starting index, ’n’ denotes the number of items to be removed from the specified starting index.‘item 1, item 2, …..item n’ represents the list of new items to be added at the given index. If n=0, no item is removed, the new items are just added to the specified starting index.
  • The changes reflect in the original array.
  • The result need not be assigned to any other new variable.
  • The return value is an array containing the deleted element.
  • Takes ’n’ number of arguments (a list of new items can be supplied)

Syntax: array_name.splice(i, n, item 1, item 2, …..item n)

Parameter Details:

  1. Index, Required. An integer that specifies at what position to add /remove items, Use negative values to specify the position from the end of the array.
  2. Optional. The number of items to be removed. If set to 0(zero), no items will be removed. And if not passed, all item(s) from the provided index will be removed.
  3. Argument 3…n: Optional. The new item(s) to be added to the array.
Examples: 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]

Note:

1. Slice() for negative indexes— add length to negative indexes and make slice indexes positive. (tip)

2. Slice () can be used both for arrays and strings but Splice() can only be used for arrays.

Web developer who loves to code and help others code :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store