Array Methods

JavaScript slice() & splice()

Learn to extract portions of arrays or modify them in place.

slice() Method

The slice() method returns a shallow copy of a portion of an array without modifying the original array. It takes a start and end index.

Extract Array Elements Using slice()

const fruits = ['apple', 'banana', 'orange', 'grape'];
const sliced = fruits.slice(1, 3);
console.log(sliced); // ['banana', 'orange']
console.log(fruits); // Original unchanged

The slice() method returns a new array containing selected elements between the start and end index without modifying the original array.

Run Code

splice() Method

The splice() method removes elements from an array and optionally inserts new elements at the same position. It modifies the original array.

Modify Arrays Using splice()

const fruits = ['apple', 'banana', 'orange', 'grape'];
const removed = fruits.splice(1, 2, 'mango', 'kiwi');
console.log(removed); // ['banana', 'orange']
console.log(fruits); // ['apple', 'mango', 'kiwi', 'grape']

The splice() method removes elements from an array and optionally inserts new ones at the same position. It modifies the original array.

Run Code

slice() Examples

Basic Slicing

Common slice() Usage Examples

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(0, 2)); // [1, 2]
console.log(arr.slice(2)); // [3, 4, 5]
console.log(arr.slice(-2)); // [4, 5] (last 2)

These examples show different ways to extract array portions using start index, end index, and negative indices.

Run Code

Copy an Array

Copy an Array Using slice()

const original = [1, 2, 3];
const copy = original.slice();
copy[0] = 99;
console.log(original); // [1, 2, 3] - unchanged
console.log(copy); // [99, 2, 3]

Calling slice() without arguments creates a shallow copy of the array, leaving the original array unchanged.

Run Code

splice() Examples

Remove Elements

Remove Elements from an Array Using splice()

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); // Remove 2 elements starting at index 2
console.log(arr); // [1, 2, 5]

You can remove elements from an array by specifying the start index and number of elements to delete.

Run Code

Insert Elements

nsert Elements into an Array Using splice()

const arr = [1, 2, 5];
arr.splice(2, 0, 3, 4); // Insert at index 2 without removing
console.log(arr); // [1, 2, 3, 4, 5]

By setting the delete count to 0, splice() can insert new elements into an array without removing existing items.

Run Code

Replace Elements

Replace Array Elements Using splice()

const arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2, 'x', 'y', 'z');
console.log(arr); // ['a', 'x', 'y', 'z', 'd']

splice() can remove existing elements and insert new ones at the same position in a single operation.

Run Code

slice() vs splice() Comparison

Aspect	slice()	splice()
Mutates array	No	Yes
Returns	New array	Removed elements
Use case	Extract values	Modify array

Common Mistakes

❌ Confusing slice() and splice()

Difference Between slice() and splice()

// slice() - doesn't modify original
const arr = [1, 2, 3];
arr.slice(1); // Returns [2, 3]
console.log(arr); // [1, 2, 3] - unchanged

// splice() - modifies original
arr.splice(1); // Removes elements and modifies arr
console.log(arr); // [1]

slice() creates a new array without modifying the original, while splice() directly changes the original array.

Run Code

❌ splice() Second Parameter Confusion

Understanding splice() deleteCount Parameter

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // Removes 2 elements (2, 3)
console.log(arr); // [1, 4, 5]

// Without second parameter: removes everything from index onward
const arr2 = [1, 2, 3, 4, 5];
arr2.splice(1); // Removes all from index 1
console.log(arr2); // [1]

The second parameter in splice() defines how many elements to remove. If omitted, all elements from the start index are removed.

Run Code

FAQs

Can slice() accept negative indices?

Using Negative Indices in slice()

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.slice(-2)); // ['c', 'd'] (last 2)
console.log(arr.slice(0, -1)); // ['a', 'b', 'c']

slice() supports negative indices, allowing you to extract elements starting from the end of the array.

Run Code

What's the difference in syntax?

slice() vs splice() Syntax Comparison

slice(start, end)     // end is NOT included
splice(start, deleteCount, item1, item2...)

slice(start, end) extracts elements without modifying the array, while splice(start, deleteCount, items) removes or replaces elements in the original array.

Run Code

← Back to Arrays Overview