3 Ways to Use Array Slice in JavaScript

In JavaScript, using the slice() method on an array returns a shallow copy of a portion of the array, based on the start and end indices passed.

Here’s a brief refresher on the slice method: 

• Both the start and end indices are optional arguments.
• By default, the start index specified is 0 and the end index specified is array.length
• The element at the end index is not considered in the slice. This means if you slice an array passing start as 0 and end as 5, then elements from 0th to 4th index will be copied.
• The slice() method doesn’t affect the original array from which we are performing slice.
• slice() used on an array only creates a shallow copy of the array.
• We can also give a negative value for the start and end indices, which count backward from the end of an array. So, we can have a -1 index point to the last element of an array.

var numbers = [0, 1, 2, 3, 4, 5];
var newNumbers = numbers.slice(1,4);
newNumbers;   //[1,2,3]

More on JavaScript: What Are JavaScript Algorithms and Data Structures?

How to Use Array Slice in JavaScript

Below are some common ways you can use the array slice method in JavaScript.

1. Use Array Slice to Copy an Array

var numbers = [0, 1, 2, 3, 4, 5];
var copiedNumbers = numbers.slice(0, numbers.length);
copiedNumbers; // [0, 1, 2, 3, 4, 5]

By default, the start index is 0 and the end index is the length of the array. By applying that, we see:

var numbers = [0, 1, 2, 3, 4, 5];
var copiedNumbers = numbers.slice();
copiedNumbers; // [0, 1, 2, 3, 4, 5]

2. Use Array Slice to Get the First N Elements in an Array

This is similar to copying an array. Instead of passing the end index value as arrayLength, pass end index as n.

function firstNItems(n, numbers =[] ) {
   if(n >= 0) {
      return numbers.slice(0, n);
   }
   return [];
}
firstNItems(0, [1,2,3]); // []
firstNItems(2, [1,2,3]); // [1,2]

3. Use Array Slice to Remove an Element at a Specific Index

Using the shift and pop method, you can remove an element at the front and end of the array respectively. The splice() method can also be used remove elements at a specific index, but it modifies the original array. Using slice() allows you to achieve the same result without changing the source array. 

This will allow you to do the following:

• Create an array that contains all elements of the array before the index.
• Create an array that contains all elements of the array after the index.
• Join two arrays.

function removeElementAt(arr, index) {
   let frontPart = arr.slice(0, index);
   let lastPart  = arr.slice( index+1 ); // index to end of array
   return [...frontPart, ...lastPart];
}
let numbers = [1,2,3,4,5];
removeElementAt(numbers, 2); [1,2,4,5];

Frequently Asked Questions