3 Pragmatic Uses of JavaScript Array slice() Method
The Array.prototype
object provides the slice()
method that allows you to extract subset elements of an array and add them to the new array. In this tutorial, we will show you the practical uses of the JavaScript array slice()
method.
Introduction to JavaScript Array slice() method
The slice()
method accepts two optional parameters as follows:
slice(start, stop);
Both start
and stop
parameters are optional.
The start
parameter determines the zero-based index at which to start extraction. If the start
is undefined
, slice()
begins at 0
.
The stop
parameter, as its name implies, is a zero-based index at which to end extraction. The slice()
method extracts up to stop-1
. It means that the slice()
method doesn’t include the element at the stop
position in the new array. If you omit the stop
parameter, the slice()
method will use the length of the array for the stop
parameter.
The slice()
returns a new array that contains the elements of the original array. It’s important to keep in mind that the slice()
method performs the shallow copy of elements to the new array only. In addition, it doesn’t change the source array.
Clone an array
The slice()
is used to clone an array as shown in the following example:
var numbers = [1,2,3,4,5];
var newNumbers = numbers.slice();
Code language: JavaScript (javascript)
In this example, the newNumbers
array contains all the elements of the numbers
array.
Copy a portion of an array
The typical use of the slice()
method is to copy a portion of an array without modifying the source array. Here is an example:
var colors = ['red','green','blue','yellow','purple'];
var rgb = colors.slice(0,3);
console.log(rgb); // ["red", "green", "blue"]
Code language: JavaScript (javascript)
The rgb
array contains the first three elements of the colors
array. The source array colors
remains intact.
Convert array-like objects into arrays
The slice()
method is used to convert an array-like object into an array. For example:
function toArray() {
return Array.prototype.slice.call(arguments);
}var classification = toArray('A','B','C');
console.log(classification); // ["A", "B", "C"]
Code language: JavaScript (javascript)
In this example, the arguments
of the toArray()
function is an array-like object. Inside the toArray()
function, we called the slice()
method to convert the arguments object into an array.
Every argument we pass to the toArray()
function will be the elements of the new array.
Another typical example that you often see is converting a NodeList
into an array as follows:
var p = document.querySelectorAll('p');
var list = Array.prototype.slice.call(p);
Code language: JavaScript (javascript)
In this example, first, we used the document.querySelectorAll()
to get all p
nodes of the HTML document. The result of this method is a NodeList
object, which is an array-like object. Then, we called the slice()
method to convert the NodeList
object into an array.
Sometimes, you see the following syntax:
var list = [].slice.call(document.querySelectorAll('p'));
Code language: JavaScript (javascript)
In this example, we instantiated an empty array []
and indirectly accessed the slice()
method of the Array.prototype
method through the empty array. The effect is the same as the one that uses the Array.prototype
directly.
In this tutorial, you have learned how to use the JavaScript array slice()
method to copy an entire or a subset of the array and convert an array-like object into an array.