JavaScript Array slice() Method

JavaScript Array slice() method is used to extract a portion of the original array into a new array object. It doesn’t modify the original array. 

Syntax

array.slice(start, end)

Parameters

1. start(optional): It is the index at which to begin extraction. If not provided, the selection starts at start 0.
2. end(optional): It is the index before which to end extraction(not including end). If negative, it’s treated as an offset from the end.

Return Value

Returns a new array containing the extracted elements.

Visual Representation

Example 1: How to use Array slice() method

let letters = ['A', 'B', 'C','D', 'E', 'F'];

//Starts slicing from the third element (index 2) until the end of the array.
let slicedPortion = letters.slice(2);

console.log(slicedPortion);

//Starts slicing from the first element (index 0) and stops right before the fourth element (index 3).
let slicedPortion2 = letters.slice(0, 3);

console.log(slicedPortion2);

Output

[ 'C', 'D', 'E', 'F' ]
[ 'A', 'B', 'C' ]

One question in your mind is how this keyword in the .slice() functions as an Array. Because when you do.

object.method()

The object automatically refers to the value of this keyword in the javascript method. So with:

[1,2,4,5].slice()

Example 2: Using on array-like objects

function list() {
 let argsArr = Array.prototype.slice.call(arguments);
 let slicedArg = argsArr.slice(1, 4);
 return slicedArg;
 }
 
 const list1 = list(1,2,3,4,5);
 console.log(list1);

Output

[ 2, 3, 4 ]

Example 3: Passing negative parameters

let arr = ['first', 'second', 'third', 'fourth', 'fifth'];

let newArr = arr.slice(-4, -1);

console.log(newArr);

Output

[ 'second', 'third', 'fourth' ]

In the above example, Starts slicing from the second element (-4)  and stops right before the last element (or -1).

Example 4: Using sparse arrays

console.log([1, 2, , 4, 5].slice(1, 4));

Output

[ 2, <1 empty item>, 4 ]

Example 5: Clone an array

let numbers = [11, 21, 31, 41, 51];

let newNumbers = numbers.slice();

console.log(newNumbers)

Output

[ 11, 21, 31, 41, 51 ]

Browser Compatibility

1. Google Chrome 1 and above
2. Microsoft Edge 12 
3. Firefox 1 and above
4. Safari 1 and above
5. Opera 4 and above

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.