Skip to main content

slice() in JavaScript – How to Extract Items from an Array

Whenever you use slice() on an array, the method does the following:

  1. It creates a new array.
  2. It extracts a specified part of its calling array into the newly created array—without altering the original array.
note

A calling array is an array on which you used slice(). So, in bestColorsList.slice(), bestColorsList is the calling array.

Here's an example:

// Define an array:
const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];

// Extract all colorsArray's items from the second index position:
const duplicatedColors = colorsArray.slice(2);

console.log(duplicatedColors);

// The invocation above will return:
["green", "white", "yellow", "pink"]

console.log(colorsArray);

// The invocation above will return:
["red", "blue", "green", "white", "yellow", "pink"]

Try it on StackBlitz

In the snippet above, we used slice() to duplicate all the colorsArray's items from index 2.

In other words, we copied colorsArray from the 2nd index position.

Let's now discuss slice()'s syntax.

Syntax of the slice() Method

callingArray.slice(startIndex, endIndex)

As shown in the snippet above, slice() accepts two arguments.

Argument 1: startIndex

The startIndex argument is the first argument accepted by the slice() method. It defines the index position where you want the extraction to start.

Keep in mind that the startIndex is part of the items that the computer will duplicate.

Here's an example:

const colorsArray = ["red", "blue"];
const duplicatedColors = colorsArray.slice(0);

console.log(duplicatedColors);

// The invocation above will return:
["red", "blue"]

Try it on StackBlitz

You can see that "red" is part of the items extracted from colorsArray.

"red" got extracted because slice() starts duplicating an array from the startIndex (0 in this case).

Suppose the startIndex argument is greater than the calling array's length. In that case, the computer will automatically change the startIndex to the calling array's length. As such, no item will get duplicated.

Here's an example:

const colorsArray = ["red", "blue"];
const duplicatedColors = colorsArray.slice(14);

console.log(duplicatedColors);

// The invocation above will return:
[]

Try it on StackBlitz

You can see that slice()'s invocation returned an empty array because no item got extracted from colorsArray.

In other words, the system automatically changed colorsArray.slice(14) to colorsArray.slice(2). And since no item is at the index position 2, the computer returned an empty array.

Suppose you wish to start extracting items from the end of the calling array. In such a case, use a negative number as your startIndex.

Here's an example:

const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];
const duplicatedColors = colorsArray.slice(-2);

console.log(duplicatedColors);

// The invocation above will return:
["yellow", "pink"]

Try it on StackBlitz

You can see that the index counting started from colorsArray's last item because we used a negative number as the startIndex.

So, now that we know about the startIndex parameter, we can discuss the endIndex argument.

Argument 2: endIndex

The endIndex argument is optional. It specifies the index position where you want slice()'s extraction to end.

note

The endIndex's item is not part of the values that the computer will extract.

Here's an example:

// Define an array:
const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];

// Extract three of colorsArray's items from the first index position:
const duplicatedColors = colorsArray.slice(1, 4);

console.log(duplicatedColors);

// The invocation above will return:
["blue", "green", "white"]

Try it on StackBlitz

In the snippet above, the colorsArray.slice(1, 4) code instructs the computer to extract three of colorsArray's items—beginning from the first index position.

Suppose you omit the endIndex argument or if its value is equal to or greater than callingArray.length - startIndex (that is, the remaining items from the startIndex). In such a case, the computer will extract all the array's items—beginning from the startIndex.

Here's an example:

// Define an array:
const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];

// Extract all colorsArray's items from the first index position:
const duplicatedColors = colorsArray.slice(1);

console.log(duplicatedColors);

// The invocation above will return:
["blue", "green", "white", "yellow", "pink"]

Try it on StackBlitz

The slice() code in the snippet above extracted all of colorsArray's items—from the first index position—because we omitted the endIndex argument.

Here's another example:

// Define an array:
const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];

// Extract all colorsArray's items from the first index position:
const duplicatedColors = colorsArray.slice(1, 35);

console.log(duplicatedColors);

// The invocation above will return:
["blue", "green", "white", "yellow", "pink"]

Try it on StackBlitz

The slice() code in the snippet above extracted all of the colorsArray's items—from the first index position—because the endIndex argument is greater than callingArray.length - startIndex (that is, 6 - 1).

In other words, the endIndex argument is greater than the number of remaining items from the startIndex.

Suppose endIndex is a negative number. In that case, the system will count the index positioning from the end of the calling array.

Here's an example:

const colorsArray = ["red", "blue", "green", "white", "yellow", "pink"];
const duplicatedColors = colorsArray.slice(1, -2);

console.log(duplicatedColors);

// The invocation above will return:
["blue", "green", "white"]

Try it on StackBlitz

You can see that the computer counted endIndex's numbering from the end of the calling array because the endIndex argument is negative.

Important Stuff to Know about slice()

The slice() method does a shallow copy of its calling array's items.

So, suppose you use the method to extract an array's object. In that case, slice() will create a reference between the original object and the cloned one.

Therefore, whatever you change in the original array will reflect in the new one.

Here's an example:

// Define an object:
const colorsObject = { car: "red", laptop: "blue" };

// Define an array:
const colorsArray = [colorsObject, "green", "white", "yellow", "pink"];

// Extract all colorsArray's items from the zeroth index position:
const duplicatedColorsArray = colorsArray.slice(0, 3);

console.log(duplicatedColorsArray);

// The invocation above will return:
[{ car: "red", laptop: "blue" }, "green", "white"]

// Update colorsObject's laptop color:
colorsObject.laptop = "burlywood";

// Check colorsObject's current content:
console.log(colorsObject);

// The invocation above will return:
{ car: "red", laptop: "burlywood" }

// Check colorsArray's current content:
console.log(colorsArray);

// The invocation above will return:
[{ car: "red", laptop: "burlywood" }, "green", "white", "yellow", "pink"]

// Check duplicatedColorsArray's current content:
console.log(duplicatedColorsArray);

// The invocation above will return:
[{ car: "red", laptop: "burlywood" }, "green", "white"]

Try it on StackBlitz

You can see in the snippet above that the colorsObject.laptop = "burlywood" code updated colorsArray and duplicatedColorsArray.

The calling array and its duplicate got updated because slice() did a shallow copy of colorsArray. Therefore, whatever you change in the original will reflect in the new one.

note
  • Suppose you omit the startIndex and endIndex arguments. In that case, the computer will copy all the calling array's content into the newly created array.
  • Suppose you wish to extract from an array and also modify it. In that case, use splice().
  • To remove an array's first item, use shift().
  • To remove an array's last item, use pop().

Overview

This article discussed what JavaScript's slice() method does. We also used examples to see how it works.

Thanks for reading!