If you’ve worked with JavaScript arrays, you’ve probably come across both slice() and splice(). Their names are almost identical, but they behave very differently.

One creates a new array without changing the original, while the other modifies the original array directly.

Understanding the difference between slice() and splice() in JavaScript is essential for writing clean, predictable code. It’s also one of the most commonly asked JavaScript interview questions because it tests your understanding of array manipulation and immutability.

In this guide, you’ll learn slice vs splice in JavaScript, understand when to use each method, explore how they affect memory and performance, and see why choosing the wrong one can cause bugs in frameworks like React.

What is slice()?

The slice() method returns a new array containing a portion of the original array.

The most important thing to remember is:

slice() does not modify the original array.

Syntax

array.slice(start, end);
  • start → Starting index (inclusive)
  • end → Ending index (exclusive)

Example

const fruits = ["Apple", "Banana", "Orange", "Mango"];

const result = fruits.slice(1, 3);

console.log(result);

Output

["Banana", "Orange"]

Original array:

console.log(fruits);

Output

["Apple", "Banana", "Orange", "Mango"]

Notice that nothing changed.

20 Essential Questions JavaScript Interview Questions

What is splice()?

The splice() method changes the original array by:

  • Removing elements
  • Adding elements
  • Replacing elements

Unlike slice(), splice() performs in-place mutation.

Syntax

array.splice(start, deleteCount, item1, item2, ...);

Removing Elements

const fruits = ["Apple", "Banana", "Orange", "Mango"];

fruits.splice(1, 2);

console.log(fruits);

Output

["Apple", "Mango"]

The original array has changed.

Inserting Elements

const fruits = ["Apple", "Orange"];

fruits.splice(1, 0, "Banana");

console.log(fruits);

Output

["Apple", "Banana", "Orange"]

Replacing Elements

const fruits = ["Apple", "Banana", "Orange"];

fruits.splice(1, 1, "Mango");

console.log(fruits);

Output

["Apple", "Mango", "Orange"]

slice() vs splice()

Here’s a quick comparison of the two methods.

Featureslice()splice()
Modifies Original ArrayNoYes
Returns New ArrayYesYes (removed elements)
Removes ElementsNoYes
Inserts ElementsNoYes
Replaces ElementsNoYes
Common UseCopy part of an arrayModify an array

The biggest difference is mutation.

  • slice() is immutable.
  • splice() is mutable.

Does slice() Modify the Original Array?

No.

This is why slice() is commonly used when you need to preserve existing data.

Example:

const numbers = [1, 2, 3, 4];

const copy = numbers.slice();

console.log(copy);

Output

[1, 2, 3, 4]

The original array remains unchanged.

Because of this behavior, developers often use slice() to create shallow copies of arrays.

Does splice() Modify the Original Array?

Yes.

This is exactly what splice() is designed to do.

Example:

const numbers = [1, 2, 3, 4];

numbers.splice(2, 1);

console.log(numbers);

Output

[1, 2, 4]

Since the array itself changes, be careful when multiple parts of your application reference the same array.

What Does splice() Return?

Many developers think splice() returns the updated array.

It doesn’t.

Instead, it returns the removed elements.

Example:

const numbers = [1, 2, 3, 4];

const removed = numbers.splice(1, 2);

console.log(removed);

Output

[2, 3]

Meanwhile:

console.log(numbers);

Output

[1, 4]

Common Use Cases

Use slice() When

  • Copying arrays
  • Creating subsets
  • Keeping data immutable
  • Working with React state
  • Preserving the original array

Example:

const firstThree = users.slice(0, 3);

Use splice() When

  • Removing items
  • Inserting new elements
  • Updating existing elements
  • Editing arrays in place

Example:

users.splice(index, 1);

React and Immutability

One of the biggest reasons developers prefer slice() over splice() is immutability.

React relies on detecting changes to object and array references.

Consider this:

users.splice(0, 1);

setUsers(users);

Although the array changed, React may not detect the update correctly because the same array reference is reused.

A safer approach is to create a new array.

Example:

const updatedUsers = users.slice(1);

setUsers(updatedUsers);

React now receives a brand-new array reference, making state updates predictable.

Similarly, methods like filter() and map() also return new arrays, which is why they’re commonly used in React applications.

Performance Considerations

A common question is:

Which is faster: slice() or splice()?

The answer depends on what you’re trying to achieve.

slice()

  • Allocates memory for a new array.
  • Leaves the original untouched.
  • Preferred when immutability matters.

splice()

  • Changes the original array.
  • Avoids creating an entirely new copy in some scenarios.
  • Can be more memory-efficient for in-place updates.

For most applications, the performance difference is negligible compared to the benefits of writing clean and maintainable code.

Always prioritize readability unless profiling shows a real performance bottleneck.

Common Mistakes

Expecting slice() to Modify the Array

Incorrect:

numbers.slice(1, 3);

console.log(numbers);

The original array remains unchanged.

Using splice() in React State

Avoid:

todos.splice(index, 1);

This mutates state directly.

Instead:

const updatedTodos = todos.filter((_, i) => i !== index);

This creates a new array and follows React’s immutable state principles.

Confusing the Return Value of splice()

Remember:

  • The original array changes.
  • The returned value contains the removed elements.

Best Practices

  • Use slice() whenever you want to preserve the original array.
  • Use splice() only when in-place modification is intentional.
  • Avoid mutating arrays stored in React state.
  • Prefer immutable array methods like map(), filter(), and slice() when building modern frontend applications.
  • Choose readability over micro-optimizations.

Frequently Asked Questions

What is the difference between slice() and splice()?

slice() returns a portion of an array without modifying the original, while splice() changes the original array by removing, inserting, or replacing elements.

Does slice() mutate the original array?

No.

It always returns a new array and leaves the original unchanged.

What does splice() return?

splice() returns an array containing the removed elements.

When should I use slice() instead of splice()?

Use slice() whenever you need a copy of part (or all) of an array without modifying the original data.

Why is slice() preferred in React?

Because React encourages immutable state updates. Since slice() creates a new array, it works well with React’s rendering model.

Additional Learning Resources

Expand your knowledge of JavaScript array methods with these trusted resources:

Related Articles

Continue learning JavaScript fundamentals with these topics:

  • map() vs filter() vs forEach()
  • JavaScript Arrays Explained
  • Callback Functions in JavaScript
  • Truthy and Falsy Values in JavaScript
  • Null vs Undefined in JavaScript
  • Difference Between var, let, and const

Final Thoughts

Understanding slice() vs splice() in JavaScript comes down to one key concept:

Immutability vs Mutation.

  • Use slice() when you want to create a new array while preserving the original.
  • Use splice() when you intentionally want to modify an existing array by adding, removing, or replacing elements.

If you’re working with modern frameworks like React, you’ll often prefer immutable methods because they make state updates predictable and reduce bugs. On the other hand, splice() remains a powerful tool when direct array modification is exactly what you need.

By mastering these two methods, you’ll write cleaner JavaScript, avoid common mistakes, and confidently answer one of the most frequently asked JavaScript interview questions.