JavaScript Notes

JavaScript splice() vs slice() - Complete Tutorial with Examples

Master JavaScript splice() and slice(): add/remove/replace elements, extract portions, mutation behavior, comparison table, real-world use cases, and interview Q&A.

splice() and slice() sound similar but behave very differently. One mutates; one doesn't. One is for editing; one is for copying. Get these straight and you'll never confuse them again.

text example

Quick Comparison

splice()  →  MUTATES original array  →  add, remove, replace elements
slice()   →  NEW array              →  copy a portion of the array

Memory trick:
  "sp-LICE" has an extra letter "p" → "Plus" work = mutates
  "s-LICE" is lean             → just reads/copies

Delete Elements

Example

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

Output

Removed: [2, 3]
Array: [1, 4, 5]

Insert Elements (deleteCount = 0)

Example

const arr = [1, 4, 5]; // Insert "a", "b" at index 1, remove nothing arr.splice(1, 0, "a", "b"); console.log(arr);

Output

[1, "a", "b", 4, 5]

Replace Elements

Example

const arr = [1, 2, 3, 4, 5]; // Remove 2 elements at index 1, insert "X", "Y", "Z" arr.splice(1, 2, "X", "Y", "Z"); console.log(arr);

Output

[1, "X", "Y", "Z", 4, 5]

Negative Index

Example

const arr = [1, 2, 3, 4, 5]; // Remove last 2 elements (start = -2) arr.splice(-2, 2); console.log(arr); // Remove everything from index 2 to end const arr2 = [1, 2, 3, 4, 5]; arr2.splice(2); console.log(arr2);

Output

[1, 2, 3]
[1, 2]

All splice() Operations

Example

const colors = ["red", "green", "blue", "yellow", "purple"]; // 1. Delete colors.splice(2, 1); // remove "blue" console.log("After delete:", colors); // 2. Insert colors.splice(1, 0, "cyan", "magenta"); // insert before "green" console.log("After insert:", colors); // 3. Replace colors.splice(0, 1, "orange"); // replace "red" with "orange" console.log("After replace:", colors);

Output

After delete: ["red", "green", "yellow", "purple"]
After insert: ["red", "cyan", "magenta", "green", "yellow", "purple"]
After replace: ["orange", "cyan", "magenta", "green", "yellow", "purple"]

slice() — The Non-Mutating Extractor

slice() copies a portion of an array into a new array, leaving the original untouched.

Syntax

js example

array.slice(start, end)  // end is EXCLUSIVE
// Returns: new array with elements from start up to (not including) end
// Mutates: NO

Parameter	Description
`start`	Index to begin extraction (inclusive)
`end`	Index to stop extraction (exclusive — not included)

Basic slice() Examples

Example

const arr = [1, 2, 3, 4, 5]; console.log(arr.slice(1, 3)); // [2, 3] — index 1 and 2 console.log(arr.slice(2)); // [3, 4, 5] — from index 2 to end console.log(arr.slice(-2)); // [4, 5] — last 2 elements console.log(arr.slice(-3, -1)); // [3, 4] — 3rd from end up to (not incl.) last console.log(arr.slice()); // [1, 2, 3, 4, 5] — full shallow copy console.log(arr); // [1, 2, 3, 4, 5] — unchanged!

Output

[2, 3]
[3, 4, 5]
[4, 5]
[3, 4]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]

Visual: slice() Index Reference

Example

Array: [ 1, 2, 3, 4, 5] Positive: [0] [1] [2] [3] [4] Negative: [-5][-4][-3][-2][-1] slice(1, 3): start=1 (inclusive), end=3 (exclusive) → [2, 3] slice(-2): last 2 elements → [4, 5]

Shallow Copy with slice()

Example

const original = [1, 2, 3]; const copy = original.slice(); // full shallow copy copy.push(99); console.log("Original:", original); console.log("Copy:", copy); // ⚠️ Shallow copy — nested objects are still shared! const nested = [{ a: 1 }, { a: 2 }]; const shallowCopy = nested.slice(); shallowCopy[0].a = 999; console.log("Nested original:", nested[0].a); // 999 — mutated!

Output

Original: [1, 2, 3]
Copy: [1, 2, 3, 99]
Nested original: 999

splice() vs slice() — Full Comparison

Feature	`splice()`	`slice()`
Mutates original	✅ YES	❌ NO
Returns	Array of removed elements	New array with extracted elements
Can insert?	✅ Yes	❌ No
Can delete?	✅ Yes	❌ No (just reads)
Can replace?	✅ Yes	❌ No
`end` parameter	deleteCount (how many)	end index (exclusive)
Negative index	✅ Yes	✅ Yes
Immutable alternative	`toSpliced()` (ES2023)	Already non-mutating
Use case	Edit the array	Copy a portion

Example

const items = ["a", "b", "c", "d", "e"]; // slice: non-destructive copy const portion = items.slice(1, 4); console.log("slice result:", portion); console.log("original after slice:", items); // splice: destructive edit const removed = items.splice(1, 2); console.log("splice removed:", removed); console.log("original after splice:", items);

Output

slice result: ["b", "c", "d"]
original after slice: ["a", "b", "c", "d", "e"]
splice removed: ["b", "c"]
original after splice: ["a", "d", "e"]

toSpliced() — Non-Mutating splice (ES2023)

Example

const arr = [1, 2, 3, 4, 5]; // toSpliced: returns new array, does not mutate const newArr = arr.toSpliced(1, 2, "X", "Y"); console.log("toSpliced result:", newArr); console.log("Original unchanged:", arr);

Output

toSpliced result: [1, "X", "Y", 4, 5]
Original unchanged: [1, 2, 3, 4, 5]

Real World Use Cases

Example

// 1. Remove an item by index (splice) function removeAtIndex(arr, index) { const copy = [...arr]; copy.splice(index, 1); return copy; } const fruits = ["apple", "banana", "cherry"]; console.log(removeAtIndex(fruits, 1)); // ["apple", "cherry"] // 2. Insert at specific position (splice) function insertAt(arr, index, item) { const copy = [...arr]; copy.splice(index, 0, item); return copy; } console.log(insertAt([1, 2, 4, 5], 2, 3)); // [1, 2, 3, 4, 5] // 3. Paginate with slice function getPage(arr, page, size) { return arr.slice((page - 1) * size, page * size); } const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log("Page 2:", getPage(items, 2, 3)); // [4, 5, 6] // 4. Get last N elements with slice const logs = ["a", "b", "c", "d", "e", "f"]; const lastThree = logs.slice(-3); console.log("Last 3:", lastThree);

Output

["apple", "cherry"]
[1, 2, 3, 4, 5]
Page 2: [4, 5, 6]
Last 3: ["d", "e", "f"]

Common Mistakes

❌ Wrong	✅ Correct	Why
`arr.slice(1, 3)` expecting index 3 included	`slice(1, 3)` returns indices 1 and 2 only	`end` in `slice()` is exclusive
`arr.splice(1, 3)` expecting to extract	Use `arr.slice(1, 3)` to extract without mutation	`splice` mutates; `slice` extracts
Confusing `splice(start, deleteCount)` with `slice(start, end)`	splice's 2nd arg = HOW MANY, slice's 2nd arg = WHERE TO STOP	Different meanings for 2nd argument!
`arr.splice(1, 0)` expecting deletion	`arr.splice(1, 1)` to delete 1 element	`deleteCount = 0` means insert, not delete
Forgetting `splice()` returns removed elements	`const removed = arr.splice(...)`	Returned array is the deleted elements

Cheat Sheet

text example

splice — MUTATING:
  Delete:     arr.splice(index, count)
  Insert:     arr.splice(index, 0, item1, item2)
  Replace:    arr.splice(index, count, newItem)
  Returns:    array of removed elements

slice — NON-MUTATING:
  Get portion:  arr.slice(start, end)    ← end is exclusive
  From index:   arr.slice(2)             ← from index 2 to end
  Last N:       arr.slice(-N)            ← last N elements
  Full copy:    arr.slice()
  Returns:      new array

Immutable alternatives (ES2023):
  toSpliced(start, deleteCount, ...items)   ← new array, no mutation

Interview Questions

Q1. What is the key difference between splice() and slice()?

splice() mutates the original array and can add, remove, or replace elements. slice() does not mutate the original — it returns a new array with a portion of the original.

Q2. What does splice() return?

An array of the removed elements. If deleteCount is 0 (insert only), it returns an empty array [].

Q3. What does slice() return?

A new array containing the extracted elements. The original array is unchanged.

Q4. What is the difference between splice(start, deleteCount) and slice(start, end)?

In splice(), the second argument is how many elements to remove (deleteCount). In slice(), the second argument is the index where extraction stops (exclusive end index). This is the most common confusion!

Q5. How do you remove a specific element from an array using splice()?

First find the index: const idx = arr.indexOf(item), then if idx !== -1, call arr.splice(idx, 1).

Q6. How do you create a shallow copy of an array using slice()?

const copy = arr.slice() — calling slice() with no arguments returns a full shallow copy.

Q7. What is toSpliced() (ES2023)?

toSpliced() is the non-mutating version of splice(). It returns a new array with the specified changes applied, leaving the original untouched.

Q8. How would you insert an element at a specific index without mutating the original?

Example

// ES2023 const newArr = arr.toSpliced(index, 0, newItem); // Pre-ES2023 const newArr = [...arr.slice(0, index), newItem, ...arr.slice(index)];

Key Takeaways

splice() mutates — use it to add, remove, or replace in place
slice() does not mutate — use it to copy a portion
splice(start, deleteCount) — second arg = HOW MANY to remove
slice(start, end) — second arg = WHERE to stop (exclusive)
splice() returns the removed elements; slice() returns the extracted copy
Use [...arr].splice() or toSpliced() (ES2023) for non-mutating splice
slice(-N) is a clean way to get the last N elements

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript splice() vs slice() - Complete Tutorial with Examples.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, arrays, splice, slice

Continue learning this concept

ArraysJavaScript Array Basics - Complete BeginnerLearn JavaScript array basics from scratch: creation, indexing, length, iteration, mutation vs copy, and real-world patterns. 30+ examples with outputs.ArraysJavaScript Array Methods - Complete Reference Guide with ExamplesComprehensive guide to all JavaScript array methods: push, pop, splice, slice, sort, flat, map, filter, reduce, ES2023 methods with examples, outputs, and performance tips.ArraysJavaScript Array Programs - 20+ Practice Problems with SolutionsMaster JavaScript arrays with 20+ practical programs: sum, max, reverse, duplicates, sorting, searching, matrix operations, and real-world coding patterns.ArraysJavaScript Arrays Basics - Complete Guide with Examples & DiagramsMaster JavaScript arrays from scratch. Learn array creation, indexing, iteration, multidimensional arrays, reference types, and memory behavior with 30+ examples.ArraysJavaScript Array filter() Method - Complete Tutorial with ExamplesMaster JavaScript array filter() method: syntax, callback, filtering objects, chaining, remove falsy values, duplicates, real-world use cases, and interview Q&A.ArraysJavaScript filter() Method — Complete Guide with Examples 2026Master the JavaScript Array filter() method with detailed syntax, 6+ code examples with output, comparison with find() and forEach(), common mistakes, interview questions, and FAQ. Beginner-friendly guide in English with detailed explanations.

PreviousJavaScript Array sort() Method - Complete Tutorial with Examples NextJavaScript Object Destructuring - Complete Guide with Examples