Sign in
Log inSign up

Array.slice() and Array.splice()

Ibukun Oyewo's photo
Ibukun Oyewo
·Oct 6, 2021·

3 min read

Array.slice()

  • This method returns selected copies of element(s) from an array as a new array object without modifying the original array.

  • It can take two parameters. The first parameter is the starting index, while the second parameter is the end index (which is optional). Remember that Javascript counts from 0, so the first item of an array will always have an index of 0.

  • This is the Javascript representation of the explanation above - array.slice(s, e)

  • Now let’s dive into examples of how this method can be used:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let newNames = names.slice(2, 5);
console.log(newNames) = ["Omah", "Shile", "Tide"]
  • In this second example, only the starting index will be specified. Please note, whenever the end index isn’t specified, the end index is automatically the length of the array. For example: 
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let newNamesOne = names.slice(2);
console.log(newNamesOne) = ["Omah", "Shile", "Tide", "Ryan"]
  • For the third example, I will be using negative indexes. This method also accepts negative indexes as the starting index. In this case, the last element has an index of -1, second to the last, -2...and so on. For example:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let newNamesTwo = names.slice(-3);
console.log(newNamesTwo) = ["Shile" ,"Tide", "Ryan"]

Array.splice()

  • Unlike array.slice, this method modifies an array by either adding or removing items from that array.

  • A new array containing the elements removed is returned.

  • If no element is deleted, an empty array is returned

  • This method can take up to n number of arguments, i.e. The index, the number of items to be removed and the new items to be added to the element. The last two arguments are optional.

  • This is the javascript representation of the explanation above: 

array.splice(start, deleteCount, item1, item2, itemN)

  • Enough talking, let’s dive into the examples!

  • Example 1: when there’s just one argument, the items after the starting index are removed from the array.

let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let newNamesThree = names.splice(2);
console.log(newNamesThree) = ["Omah", "Shile", "Tide", "Ryan"];
console.log(names) = ["Ibukun", "Ayo"];
  • As explained earlier, the second argument indicates the number of items to be removed. Example 2:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let exampleNames = names.splice(3, 2);
console.log(exampleNames) = ["Shile", "Tide"];
console.log(names) = ["Ibukun", "Ayo", "Omah", "Ryan"]
  • When the second argument is 0, no element is removed. Example 3:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let exampleNamesOne = names.splice(3, 0);
console.log(exampleNamesOne) = [ ];
console.log(names) = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"]
  • Let’s try removing some names adding some new ones. Example 4:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let extraNames = names.splice(0, 2, "John", "Titi");
console.log(extraNames) = ["Ibukun", "Ayo"]
console.log(names) =  ["John", "Titi", "Omah", "Shile", "Tide", "Ryan"]
  • You can also add items to an array without deleting any item. In this case, the second parameter will be 0. Example 5:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let extraNames = names.splice(4, 0, "John", "Titi");
console.log(extraNames) = [ ]
console.log(names) =  ["Ibukun", "Ayo", "Omah", "Shile",  "John", "Titi",  "Tide", "Ryan"];
  • You can also use negative indexes to remove or add to the last section of an array. Example 6:
let names = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "Ryan"];
let extraNames = names.splice(-1, 1, "John", "Titi");
console.log(extraNames) = ["Ryan" ]
console.log(names) = ["Ibukun", "Ayo", "Omah", "Shile", "Tide", "John", "Titi"];
2