slice() in JavaScript – How to Clone String Elements

Whenever you use slice() on a string, the method does the following:

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

Note

• A calling string is a string on which you used slice(). So, in bestColor.slice(), bestColor is the calling string.
• slice() is sometimes written as String.prototype.slice() because it is a method of the String object’s prototype property.

Syntax of the slice() Method

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

callingString.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 a string from the second index position

// Define a string:
const colorsString = "red, blue, green, white, yellow, pink";

// Copy all colorsString's elements from the second index position:
const duplicatedColors = colorsString.slice(2);

console.log(duplicatedColors);

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

console.log(colorsString);

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

Try Editing It

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

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

Example: Slice a string from the startIndex position

const colorsString = "red, blue";
const duplicatedColors = colorsString.slice(0);

console.log(duplicatedColors);

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

Try Editing It

You can see that "r" is part of the items duplicated from colorsString.

"r" got duplicated because slice() starts copying a string from the startIndex (0 in this case).

Example: Slice a string from the fourteenth index position

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

const colorsString = "red, blue";
const duplicatedColors = colorsString.slice(14);

console.log(duplicatedColors);

// The invocation above will return: ""

Try Editing It

You can see that slice()’s invocation returned an empty string because no item got duplicated from colorsString.

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

Example: How to slice items from the end of a string

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

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

console.log(duplicatedColors);

// The invocation above will return: "nk"

Try Editing It

You can see that the index counting started from colorsString’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.

CodeSweetly ads

Learn Flexbox with Images

Use beautiful images to learn CSS Flexbox.

Find out more

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 a string from the first to the fourth index position

// Define a string:
const colorsString = "red, blue, green, white, yellow, pink";

// Duplicate three of colorsString's characters from the first index position:
const duplicatedColors = colorsString.slice(1, 4);

console.log(duplicatedColors);

// The invocation above will return: "ed,"

Try Editing It

In the snippet above, the colorsString.slice(1, 4) code instructs the computer to duplicate three of colorsString’s characters—beginning from the first index position.

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

Example: Duplicate all string elements from the first index position

// Define a string:
const colorsString = "red, blue, green, white, yellow, pink";

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

console.log(duplicatedColors);

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

Try Editing It

The slice() code in the snippet above duplicated all of colorsString’s elements—from the first index position—because we omitted the endIndex argument.

Example: Slice a string from the first to the hundredth index position

// Define a string:
const colorsString = "red, blue, green, white, yellow, pink";

// Duplicate all colorsString's items from the first index position:
const duplicatedColors = colorsString.slice(1, 100);

console.log(duplicatedColors);

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

Try Editing It

The slice() code in the snippet above duplicated all of the colorsString’s elements—from the first index position—because the endIndex argument is greater than callingString.length - startIndex (that is, 37 - 1).

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

Example: Slice a string 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 string.

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

console.log(duplicatedColors);

// The invocation above will return: "ed, blue, green, white, yellow, pi"

Try Editing It

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

Note

• Suppose you omit the startIndex and endIndex arguments. In that case, the computer will copy all the calling string’s content into the newly created string.
• You can also use slice() on an array.