slice() in JavaScript – How to Clone Array Elements

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

1. It creates a new array.
2. It duplicates 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.
• slice() is sometimes written as Array.prototype.slice() because it is a method of the Array object’s prototype property.

Syntax of the slice() Method

slice() accepts two arguments. Here is the syntax:

callingArray.slice(startIndex, endIndex);

Argument 1: startIndex

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

Example: Slice an array from the second index position

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

// Copy 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.

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

Example: Slice an array from the startIndex position

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 duplicated from colorsArray.

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

Example: Slice an array from the fourteenth index position

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.

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 duplicated 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.

CodeSweetly ads

Learn Flexbox with Images

Use beautiful images to learn CSS Flexbox.

Find out more

Example: How to slice items from the end of an array

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

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 duplication to end.

Note

The endIndex’s item is not part of the values that the computer will duplicate.

Example: Slice an array from the first to the fourth index position

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

// Duplicate 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 duplicate 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 duplicate all the array’s items—beginning from the startIndex.

Example: Duplicate all array items from the first index position

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

// Duplicate 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 duplicated all of colorsArray’s items—from the first index position—because we omitted the endIndex argument.

Example: Slice an array from the first to the thirty-fifth index position

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

// Duplicate 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 duplicated 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.

Example: Slice an array from the first to the second to the last index position

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

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.

CodeSweetly ads

Learn CSS Grid with Images

Use beautiful images to learn CSS Grid.

Find out more

Important Stuff to Know about slice()

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

So, suppose you used the method to copy 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"];

// Duplicate 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 copy 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().
• You can also use slice() on a string.