JavaScript slice() Usage Explained for Beginners


JavaScript

Getting started with JavaScript slice()

If you're working with JavaScript, you're probably going to want to know how to use the slice method. The slice method is a way to extract a section of an array or a string. It's a simple method, but it can be really useful.

The slice() method returns a slice, or subarray, of the specified array. Its two arguments specify the start and end of the slice to be returned. The returned array contains the element specified by the first argument and all subsequent elements up to, but not including, the element specified by the second argument. If only one argument is specified, the returned array contains all elements from the start position to the end of the array. If either argument is negative, it specifies an array element relative to the length of the array. An argument of -1, for example, specifies the last element in the array, and an argument of -2 specifies the element before that one. Note that slice() does not modify the array on which it is invoked. Here are some examples:

let a = [1,2,3,4,5];
a.slice(0,3);    // Returns [1,2,3]
a.slice(3);      // Returns [4,5]
a.slice(1,-1);   // Returns [2,3,4]
a.slice(-3,-2);  // Returns [3]

 

JavaScript slice string

Strings are defined as a sequence of characters, and so can be interacted in some level like arrays (a collection and sequences of values of different data types). Though strings are immutable, they can be accessed via indexes, and these indexes are what we can make use of to extract part of the string.

The slice method works by accepting a required parameter - indexStart - which is the index of the first character within the string that will start the returned substring. An optional parameter - indexEnd - is the index that will indicate the end of the returned substring but is excluded from the returned substring

For example, if we need to extract characters between index five to the end or characters from the index ten through index twenty (included).

const str =
    "Let's build great applications with JavaScript, and keep the rest of the languages where there are supposed to be, in the bin.";

console.log(str.slice(5));
console.log(str.slice(10, 21));

Output

build great applications with JavaScript, and keep the rest of the languages where there are supposed to be, in the bin.
d great app

With the first slice statement, the returned string starts from the index of 5 through to the end, but for the second slice statement, the returned string starts from the index of 10 through to the index of 20 (as the index of 21 is excluded).

You can also make use of negative integers as the index values to the slice method, but with this, the returned string will start from the end of the string

console.log(str.slice(-9, -1));

Output

the bin

As you can see the " the bin" is last set of characters within the str string.

 

JavaScript slice Array

As with strings, the slice method on arrays works with the two index values (indexStart and indexEnd) with the indexEnd excluded from the returned array. The slice method returns a shallow copy of the selected part of the array. Also, you can make use of negative integer values as index values.

Let’s illustrate via code by selecting the elements from the index 3 to the end, the index 6 through 9, and index -1 through -3.

const arr = [false, "one", "two", 3, 4, 5, 6, 7, "eight", "nine", "ten", 11, 12, 13];

console.log(arr.slice(3));
console.log(arr.slice(6, 9));
console.log(arr.slice(-3,-1));

Output

[
  3,      4,     5,
  6,      7,     'eight',
  'nine', 'ten', 11,
  12,     13
]

[ 6, 7, 'eight' ]

[ 11, 12 ]

 

Summary

The slice method returns a copy of a part of a string or array based on the index selection passed. In addition, the method takes two values, the start and end index values, where the end index isn’t included in the copy of the string or the array. The slice method is similar to substring, except that negative offsets are counted from the end of the string.

 

References

Array.prototype.slice() - JavaScript | MDN (mozilla.org)
String.prototype.slice() - JavaScript | MDN (mozilla.org)

 

Olorunfemi Akinlua

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on his LinkedIn profile.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment