Table of Contents
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)
