Definition and Usage

The slice() function for arrays extracts a portion of an array based on a specified index range and returns a new array.
The original array remains unchanged.

Using this function, you can easily extract elements from an array within the desired range.

Features

  • The index range is determined by the start and end parameters you specify (the end index is not included).
  • The elements extracted using the index range are returned as a new array.
  • With this behavior, the original array remains unchanged.

In arrays, indexes start at 0.

Here's a visual example of how it works: 
[😃, 🏀, 🍅, 🐵].slice(0, 2); 👉 [😃, 🏀]

Basic Example

JavaScript 
/*
 * Note:
 * In arrays, indexes start at 0.
 * The first element has an index of 0, the second element has an index of 1.
*/

// Extract elements from a specific range and return them as a new array
const slicedColors = colors.slice(1, 3); // From index 1 up to, but not including, index 3

// Output the result
console.log(slicedColors); // Output: ['green', 'blue']

// The original array remains unchanged
console.log(colors); // Output: ['red', 'green', 'blue', 'orange', 'yellow']

Syntax

JavaScript 
arr.slice([start[, end]])

arr is the array to which the slice() function is applied.

Parameters

Description of slice() function parameters
start Optional. Specifies the index at which to start extraction, starting from 0.
  • If omitted, the default value is 0.
  • Negative values can be used, counting backward from the end of the array.
  • If greater than or equal to the length of the array (arr.length), no elements are extracted.
end Optional. Specifies the index at which to end extraction.
slice() extracts elements up to, but not including this end index.
  • If omitted, extraction continues to the end of the array.
  • Negative values can be used, counting backward from the end of the array.
  • If greater than or equal to the length of the array (arr.length), extraction continues to the end of the array.

Return value

The slice() function for arrays extracts elements from the original array within the specified index range and returns them as a new array. The returned array is a copy of the selected elements, so the original array remains unchanged.

Parameter and Return Value Examples

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// Extract the first three elements of the array
const firstThree = numbers.slice(0, 3);

console.log(firstThree); // Output: [1, 2, 3]

// Extract the last two elements of the array
const lastTwo = numbers.slice(-2);

console.log(lastTwo); // Output: [4, 5]

Examples

Check out these examples to see how the slice() function works.

Specifying Start and End Index

JavaScript 
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits.slice(2, 4)); // ['cherry', 'date']
// Extracts elements from index 2 ("cherry") up to, but not including, index 4 ("date").

Specifying Start Index Only

JavaScript 
const fruits2 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits2.slice(2)); // ['cherry', 'date', 'elderberry']
// Extracts elements from index 2 ("cherry") to the end of the array.

Using Negative Index

JavaScript 
const fruits3 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits3.slice(-2)); // ['date', 'elderberry']
// Extracts elements starting from the second-to-last element to the end of the array.

Checking Original Array Immutability

JavaScript 
const fruits4 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits4.slice(2, 4)); // ['cherry', 'date']

// The original array remains unchanged
console.log(fruits4); // ['apple', 'banana', 'cherry', 'date', 'elderberry']

Browser compatibility

Browser compatibility for JavaScript Array slice() Function
Method
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
slice() 1 12 1 1

Specifications

Specification for JavaScript Array slice() Function
Specification
slice() ECMAScript Language Specification
#sec-array.prototype.slice

References

See also