JavaScript Roadmap — Day 33: More Array Methods — slice() and splice()

📋 In This Lesson Day 33

1. The Problem

2. slice() Method

3. splice() Method

4. slice vs splice

5. Common Mistakes

6. Best Practices

7. Try It Yourself

8. Practice Tasks

Day 33 of 180 🕐 14 min read · ⚡ Intermediate Phase

More Array Methods — slice() and splice()

Two of the most powerful array methods — slice() extracts portions without modifying the original, while splice() can remove, add, and replace elements. Master these and you can manipulate arrays like a pro.

1. The Problem — Extracting and Modifying Parts of an Array

Sometimes you need to extract a portion of an array without changing the original. Other times, you need to remove, add, or replace elements anywhere in the array — not just at the beginning or end. This is where slice() and splice() come in.

Think of slice() as a copy machine — it takes a section of an array and gives you a new array without touching the original. Think of splice() as a surgery tool — it directly cuts, removes, or inserts elements into the original array.

The difference is crucial: slice() is non-destructive (doesn't change the original), while splice() is destructive (modifies the original array). Understanding this will save you from many bugs in your code.

slice() vs splice() — The Key Difference

// Original array
let fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// slice() — extracts, doesn't modify original
let citrus = fruits.slice(2, 4);
console.log(citrus);      // ["cherry", "date"]
console.log(fruits);      // Original unchanged!

// splice() — modifies original array
let removed = fruits.splice(2, 2);
console.log(removed);     // ["cherry", "date"]
console.log(fruits);      // ["apple", "banana", "elderberry"] — changed!

💡 The key insight: slice() is your go-to when you need to extract data for display or processing. splice() is for when you need to modify the actual array — like removing an item from a shopping cart.

2. slice() — Extract Without Modifying

The slice() method takes two parameters: start index (where to begin) and end index (where to stop — not included). It returns a new array containing the extracted elements. The original array remains untouched.

One of the most useful features of slice() is that it accepts negative indices. A negative index counts from the end of the array: -1 is the last element, -2 is the second last, and so on.

If you call slice() with no arguments, it creates a shallow copy of the entire array. This is a common pattern when you need to duplicate an array without referencing the original.

slice() Examples

let colors = ["red", "orange", "yellow", "green", "blue"];

// Extract from index 1 to 3 (3 not included)
let middle = colors.slice(1, 3);
console.log(middle);  // ["orange", "yellow"]

// Extract from index 2 to the end
let fromYellow = colors.slice(2);
console.log(fromYellow);  // ["yellow", "green", "blue"]

// Extract last 2 elements using negative indices
let lastTwo = colors.slice(-2);
console.log(lastTwo);  // ["green", "blue"]

// Extract from index 1 to second-last
let middle2 = colors.slice(1, -1);
console.log(middle2);  // ["orange", "yellow", "green"]

// Create a complete copy
let colorsCopy = colors.slice();
console.log(colorsCopy);  // ["red", "orange", "yellow", "green", "blue"]

// Original unchanged
console.log(colors);  // Same as before — untouched!

📝 QUIZ Test Your Understanding

Question 1: What does slice() return?

A) The modified original array B) A new array with extracted elements C) The removed elements D) The length of the array

3. splice() — The Array Surgery Tool

The splice() method is much more powerful than slice() — it can remove, add, and replace elements anywhere in an array. However, it modifies the original array directly.

The syntax is: array.splice(start, deleteCount, item1, item2, ...)

start — The index where to begin (required)
deleteCount — How many elements to remove (optional, defaults to rest of array)
items — Elements to add (optional)

The name "splice" comes from the word "splicing" — joining or connecting things together. It's like performing surgery on your array: you can cut out parts (remove) and stitch in new parts (add).

splice() Examples

let fruits = ["apple", "banana", "cherry", "date"];

// Remove 2 elements starting from index 1
let removed = fruits.splice(1, 2);
console.log(removed);  // ["banana", "cherry"]
console.log(fruits);    // ["apple", "date"]

// Reset
fruits = ["apple", "banana", "cherry", "date"];

// Add elements without removing (deleteCount = 0)
fruits.splice(2, 0, "blueberry");
console.log(fruits);  // ["apple", "banana", "blueberry", "cherry", "date"]

// Replace elements (remove 1, add 2)
fruits.splice(2, 1, "fig", "grape");
console.log(fruits);  // ["apple", "banana", "fig", "grape", "cherry", "date"]

📝 QUIZ Test Your Understanding

Question 2: What does splice() return?

A) The modified original array B) A new array with extracted elements C) The removed elements as an array D) The length of the array

4. slice() vs splice() — Comparison

Choosing between slice() and splice() depends entirely on what you need to do. Here's a simple rule:

Use slice() when: You need to extract data for display, processing, or copying — and you want to keep the original array intact.
Use splice() when: You need to actually modify the array — removing, adding, or replacing elements permanently.

Feature	slice()	splice()
Modifies original?	❌ No (non-destructive)	✅ Yes (destructive)
Returns	New array with extracted elements	Array of removed elements
Can add elements?	❌ No	✅ Yes
Can replace elements?	❌ No	✅ Yes (remove + add)
Best for	Extracting, copying, pagination	Removing, inserting, editing arrays

Memory Trick

// SLICE = S for "Same" (doesn't change original)
// SPLICE = SP for "SPeel" (removes/changes original)

// Another way to remember:
// slice() → s"l"ice → "l" = leaves original alone
// splice() → sp"l"ice → "p" = permanently changes

let arr = [1, 2, 3, 4, 5];

// slice() — leaves original UNCHANGED (L = Leave)
let sliced = arr.slice(1, 3);
console.log(arr);      // [1, 2, 3, 4, 5] (unchanged)

// splice() — PERMANENTLY changes original (P = Permanent)
let spliced = arr.splice(1, 2);
console.log(arr);      // [1, 4, 5] (changed!)

5. Common Mistakes to Avoid

Mistakes & Fixes

// ❌ MISTAKE 1: Forgetting that splice() modifies the original
let original = [1, 2, 3, 4];
original.splice(1, 2);
console.log(original);  // [1, 4] — original is changed!

// ✅ FIX: If you need to keep original, use slice() first to copy
let copy = original.slice();
copy.splice(1, 2);

// ❌ MISTAKE 2: Confusing the second parameter of slice()
let arr = ["a", "b", "c", "d"];
arr.slice(1, 3);  // Extracts index 1 and 2 (stops BEFORE index 3)

// ✅ FIX: Remember — end index is EXCLUSIVE (not included)

// ❌ MISTAKE 3: Using splice() when you need a new array
let users = [{ id: 1, name: "Ali" }, { id: 2, name: "Sara" }];
let filtered = users.splice(0, 1);  // This modifies 'users'!

// ✅ FIX: Use filter() or slice() for non-destructive operations
let filtered = users.slice(0, 1);  // Leaves 'users' unchanged

6. Best Practices — Professional Advice

🎯 Use slice() to Create Copies Before Modifying

When working with state in frameworks like React, always copy arrays before modifying: const newArray = oldArray.slice(); newArray.splice(1, 1);

📦 Use Negative Indices for "From the End" Operations

Instead of calculating array.length - 2, just use -2. It's cleaner and less error-prone.

🔄 Remember: slice() = Non-destructive, splice() = Destructive

This is the single most important difference. Always ask yourself: "Do I need to keep the original?" If yes, use slice().

📝 Use slice() for Pagination

When displaying data in pages, slice() is perfect: let page = allItems.slice(page * itemsPerPage, (page + 1) * itemsPerPage);

7. Try It Yourself — slice() vs splice() Playground

Experiment with slice() and splice() below. See the difference between non-destructive and destructive operations.

✏️ slice() vs splice() Playground

HTML

<div style="padding:24px;font-family:sans-serif;max-width:550px;">
  <h3 style="color:#0f1117;margin-bottom:16px;">🔧 slice() vs splice() Demo</h3>
  
  <div style="margin-bottom:16px;">
    <label style="display:block;margin-bottom:8px;font-size:12px;font-weight:700;">Current Array:</label>
    <div id="arrayDisplay" style="background:#1e2235;padding:12px;border-radius:8px;font-family:monospace;color:#cdd6f4;margin-bottom:12px;">[1, 2, 3, 4, 5]</div>
  </div>
  
  <div style="margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;">
    <input type="text" id="startInput" placeholder="Start" style="width:70px;padding:8px;border-radius:8px;border:1px solid #e5e7eb;">
    <input type="text" id="endInput" placeholder="End/Count" style="width:70px;padding:8px;border-radius:8px;border:1px solid #e5e7eb;">
    <button id="sliceBtn" style="background:#4f6ef7;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">slice()</button>
    <button id="spliceBtn" style="background:#f39c12;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">splice()</button>
    <button id="resetBtn" style="background:#6b7280;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">Reset</button>
  </div>
  
  <div style="background:#1e2235;border-radius:8px;padding:12px;">
    <div style="font-size:12px;font-weight:700;color:#a8b8ff;margin-bottom:8px;">📤 Result:</div>
    <div id="output" style="font-family:monospace;font-size:13px;color:#cdd6f4;"></div>
  </div>
</div>

JAVASCRIPT

let items = [1, 2, 3, 4, 5];
let original = [...items];

function getValues() {
  let start = parseInt(document.querySelector("#startInput").value);
  let end = parseInt(document.querySelector("#endInput").value);
  return { start: isNaN(start) ? undefined : start, end: isNaN(end) ? undefined : end };
}

document.querySelector("#resetBtn").addEventListener("click", () => {
  items = [...original];
  updateDisplay(`🔄 Array reset to original`, items);
});

updateDisplay(`✨ Ready! Try slice() (non-destructive) vs splice() (destructive)`, items);

LIVE PREVIEW

💡 slice() leaves original unchanged, splice() modifies it!

8. Practice Tasks

Task 1 — Easy: Extract First Three Items

Use slice() to extract the first three items from [10, 20, 30, 40, 50, 60]. Store the result in a new variable. Log both the original and the extracted array.

Task 2 — Medium: Remove Middle Element

Use splice() to remove the middle element from [1, 2, 3, 4, 5]. Log the removed element and the modified array.

Task 3 — Hard: Replace Items in an Array

Write a function replaceItems(arr, start, deleteCount, ...newItems) that uses splice() to replace items. Test by replacing positions 2-4 in [10, 20, 30, 40, 50, 60] with [99, 100].

🔥 Challenge of the Day

Given an array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], use slice() to extract the middle 4 elements (positions 3-6). Then use splice() to replace those 4 elements with [99, 88, 77, 66]. Log the array before and after.

🔍 View Solution

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("Before:", arr);
let middle = arr.slice(3, 7);
console.log("Extracted:", middle);
arr.splice(3, 4, 99, 88, 77, 66);
console.log("After:", arr);

🎯 Key Takeaways

slice(start, end) — Extracts elements without modifying the original array
splice(start, deleteCount, items...) — Removes, adds, or replaces elements — modifies the original
Negative indices work with both methods (count from the end)
slice() with no arguments creates a shallow copy of the entire array
splice() returns an array of the removed elements (empty array if none removed)
Always remember: slice() = safe copy, splice() = direct modification

💼 Common Interview Questions

❓ Q: What is the difference between slice() and splice()?

💡 A: slice() extracts a portion without modifying the original array. splice() modifies the original array by removing, adding, or replacing elements.

❓ Q: How do you copy an array in JavaScript?

💡 A: Using slice() with no arguments: let copy = original.slice();

❓ Q: What does splice() return?

💡 A: An array containing the removed elements. If no elements are removed, it returns an empty array.

📖 Download slice() & splice() Cheat Sheet

Quick reference for array extraction and modification

Next Lesson

Day 34 — Array Iteration with forEach()

View Full Roadmap →

Enjoying this roadmap?

Follow Muhammad Waheed Asghar for daily JavaScript tips and updates!

Follow on LinkedIn Follow on Facebook

Search This Blog

WaheedBlog | Free Web Development Tutorials for Beginners

JavaScript Roadmap — Day 33: More Array Methods — slice() and splice()

More Array Methods — slice() and splice()

1. The Problem — Extracting and Modifying Parts of an Array

2. slice() — Extract Without Modifying

3. splice() — The Array Surgery Tool

4. slice() vs splice() — Comparison

5. Common Mistakes to Avoid

6. Best Practices — Professional Advice

7. Try It Yourself — slice() vs splice() Playground

8. Practice Tasks

Task 1 — Easy: Extract First Three Items

Task 2 — Medium: Remove Middle Element

Task 3 — Hard: Replace Items in an Array

Popular Posts

Data Analytics Complete Course (2025–26): Beginner to Pro Script

Artificial Intelligence in Business: Strategy & Competitive Advantage (2025–26)