1. Introduction

The slice() method creates a shallow copy of a specified section of an array, returning it as a new array object. The selection is based on the indices provided as start and end parameters, with end being exclusive. This operation does not alter the original array.

2. Example

const animals = ["one", "two", "three", "four", "five"];

console.log(animals.slice(2));
// Expected output: Array [ 'three', 'four', 'five' ]

console.log(animals.slice(2, 4));
// Expected output: Array [ 'three', 'four' ]

console.log(animals.slice(1, 5));
// Expected output: Array [ 'two', 'three', 'four', 'five' ]

console.log(animals.slice(-2));
// Expected output: Array [ 'four', 'five' ]

console.log(animals.slice(2, -1));
// Expected output: Array [ 'three', 'four' ]

console.log(animals.slice());
// Expected output: Array [ 'one', 'two', 'three', 'four', 'five' ]

3. Using negative indices

const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

const lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['Mango', 'Pineapple']

In this example, slice(-2) extracts the last two elements of the array. When using a negative index with the slice method, negative indices are counted from the end of the array, starting at -1 for the last element, -2 for the second-to-last element, and so on. The negative index -2 itself is included because it is the starting point of the extraction.

|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- read from reverse

4. Using a positive start index and a negative end index

const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

// Using positive start index and negative end index
const sliceExample = fruits.slice(1, -1);
console.log(sliceExample); // ['Banana', 'Orange', 'Mango']

In this example, slice(1, -1) starts extracting from index 1 and goes up to, but does not include, the element at index -1 (which is the last element). This results in a new array with ['Banana', 'Orange', 'Mango']. The slice method always excludes the element at the final index specified, regardless of whether it is positive or negative.

read from start --->

   0     1     2     3     4
|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- read from reverse

5. Using slice with array of objects

In the following example, slice creates a new array, newCar, from myCar. Both include a reference to the object myHonda. When the color of myHonda is changed to purple, both arrays reflect the change.

// Using slice, create newCar from myCar.
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
const newCar = myCar.slice(0, 2);

console.log("myCar =", myCar);
console.log("newCar =", newCar);
console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

// Change the color of myHonda.
myHonda.color = "purple";
console.log("The new color of my Honda is", myHonda.color);

console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

Output

myCar = [
  { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } },
  2,
  'cherry condition',
  'purchased 1997'
]
newCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ]
myCar[0].color = red
newCar[0].color = red
The new color of my Honda is purple
myCar[0].color = purple
newCar[0].color = purple

6. Calling slice() on non array objects

The slice() method reads the length property of this. It then reads the integer-keyed properties from start to end and defines them on a newly created array.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 33, // ignored by slice() since length is 3
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));
// [ 3, 4 ]

7. Using splice() on sparse arrays

The array returned from slice() may be sparse if the source is sparse.

console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]