JavaScript Array slice()

slice() copies a selected part of an array into a new array. It does not modify the original array. The start index is included and the end index is excluded.

const names = ["John", "Mike", "Rose", "Steve", "Rabin"];
const selected = names.slice(1, 3);
console.log(selected); // ["Mike", "Rose"]

JavaScript slice() Syntax and Index Rules Top ↑

array.slice()
array.slice(start)
array.slice(start, end)

start defaults to index 0. end defaults to the array length. When both are supplied, values from start up to but not including end are copied.

Selecting Array Ranges with slice() Top ↑

The original page used five names to demonstrate several ranges. These examples are preserved with modern syntax:

const names = ["John", "Mike", "Rose", "Steve", "Rabin"];

console.log(names.slice(0, 3)); // ["John", "Mike", "Rose"]
console.log(names.slice(3));    // ["Steve", "Rabin"]
console.log(names.slice(1, 3)); // ["Mike", "Rose"]
console.log(names.slice(1, 2)); // ["Mike"]

Omitting the End Index Top ↑

const values = [10, 20, 30, 40, 50];
console.log(values.slice(2)); // [30, 40, 50]

When end is omitted, slice() copies from start through the final element.

Using Negative Indexes with slice() Top ↑

Negative indexes count from the end of the array.

const names = ["John", "Mike", "Rose", "Steve", "Rabin"];
console.log(names.slice(-3, -1)); // ["Rose", "Steve"]
console.log(names.slice(-5, 2));  // ["John", "Mike"]
console.log(names.slice(-2));     // ["Steve", "Rabin"]

This retains both negative-index examples from the original page and adds the common “last two elements” pattern.

Copy an Entire Array with slice() Top ↑

const original = [1, 2, 3];
const copy = original.slice();

console.log(copy); // [1, 2, 3]
console.log(copy === original); // false

Spread syntax ([...original]) is another common way to create a shallow copy.

Empty Results and Boundary Cases Top ↑

const values = ["a", "b", "c"];

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

If the effective start position is at or beyond the effective end position, the result is an empty array.

slice() Creates a Shallow Copy Top ↑

The outer array is new, but nested objects are still shared references.

const original = [{ name: "Ravi" }, { name: "Anita" }];
const copy = original.slice();

copy[0].name = "Sam";
console.log(original[0].name); // Sam

If you need a true deep copy, choose a strategy that matches the data types involved rather than assuming slice() will duplicate nested values.

slice() vs splice() Top ↑

Using slice() with Array-Like Objects Top ↑

slice() is generic enough to work with array-like objects when called explicitly, although Array.from() is often clearer when the goal is simply conversion.

const arrayLike = { 0: "A", 1: "B", 2: "C", length: 3 };
const result = Array.prototype.slice.call(arrayLike, 1);
console.log(result); // ["B", "C"]

Common slice() Mistakes Top ↑

• Expecting the element at the end index to be included.
• Confusing slice() with mutating splice().
• Expecting a shallow copy to duplicate nested objects.
• Forgetting that negative indexes count from the end.
• Using an end position before the start and expecting automatic reversal.

After selecting values, see displaying array elements for loop and DOM-output patterns.

← pop(): Remove Last Element Array Reference splice(): Add or Remove by Position →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: