JavaScript Array slice() Method

What You’ll Learn

The slice() method extracts a section of an array into a new array without changing the original. This tutorial covers start and exclusive end, negative indices, shallow copies, comparison with splice(), and five hands-on examples.

Introduction

When you need part of a list—the middle items, everything after the first, or a paginated chunk—slice() copies that range into a fresh array. The source list stays untouched, which makes it ideal before sorting, reversing, or passing data to functions that should not mutate shared state.

Think of slice() as scissors that cut out a segment and paste it onto a new page, leaving the original page intact.

Understanding the slice() Method

array.slice(start?, end?) returns elements from index start up to but not including end. Omitting both arguments copies the entire array (shallow copy).

Negative indices count from the end: -1 is the last element, -2 is second-to-last. Both parameters are optional and clamped to valid bounds.

📝 Syntax

General form of Array.prototype.slice:

array.slice(start, end)

Parameters

• start — zero-based index to begin (default 0). Negative counts from end.
• end — zero-based index to stop before (default length). Exclusive. Negative counts from end.

Return value

• New array with selected elements (may be empty).
• Original array unchanged.

Common patterns

• arr.slice(1, 4) — indices 1, 2, 3.
• arr.slice() — shallow copy of all elements.
• arr.slice(2) — from index 2 to end.
• arr.slice(-2) — last two elements.
• arr.slice(0, -1) — all except last.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const fruits = ["apple", "orange", "banana", "grape", "kiwi"];

const middle = fruits.slice(1, 4);

console.log(middle);
// ["orange", "banana", "grape"]

["orange", "banana", "grape"]

const fruits = ["apple", "orange", "banana"];

const copy = fruits.slice();

console.log(copy);
// ["apple", "orange", "banana"]

console.log(copy === fruits);
// false (different array object)

["apple", "orange", "banana"]
false

const nums = [10, 20, 30, 40, 50];

console.log(nums.slice(-2));
// [40, 50]

console.log(nums.slice(0, -1));
// [10, 20, 30, 40] — all but last

[40, 50]
[10, 20, 30, 40]

const colors = ["red", "green", "blue", "yellow"];

const subset = colors.slice(1, 3);

console.log("subset:", subset);
// ["green", "blue"]

console.log("original:", colors);
// ["red", "green", "blue", "yellow"]

subset: ["green", "blue"]
original: ["red", "green", "blue", "yellow"]

const forSlice = ["a", "b", "c", "d"];
const forSplice = ["a", "b", "c", "d"];

const copied = forSlice.slice(1, 3);
console.log("slice copy:", copied);
// ["b", "c"]

console.log("after slice:", forSlice);
// ["a", "b", "c", "d"] — unchanged

const removed = forSplice.splice(1, 2);
console.log("splice removed:", removed);
// ["b", "c"]

console.log("after splice:", forSplice);
// ["a", "d"]

slice copy: ["b", "c"]
after slice: ["a", "b", "c", "d"]
splice removed: ["b", "c"]
after splice: ["a", "d"]

🚀 Common Use Cases

• Pagination — items.slice(page * size, (page + 1) * size).
• Clone before mutate — copy then sort/reverse safely.
• Drop first/last — slice(1) or slice(0, -1).
• Preview subset — show first N items in UI.
• Immutable updates — replace a range in React state via slice + spread.
• Arguments object — legacy: Array.prototype.slice.call(arguments).

📝 Notes

• Does not mutate the original array.
• end is exclusive (not included).
• Shallow copy—nested objects are shared references.
• slice() with no args copies the whole array.
• Not the same as string slice() or substring().
• Empty range returns [], not an error.
• ES3—supported everywhere JavaScript runs.

💡 Best Practices