JavaScript Array slice vs splice
Table of Contents
In this post, we'll learn the difference between the JavaScript array methods slice()
and splice()
and when it's appropriate to use one over the other.
The difference between slice
and splice
is that slice
is immutable whereas splice
will mutate the array.
slice
The slice
method will take an array and return a new array with the elements specified by the optional start
and end
parameters.
They're both optional so if you leave both blank, it will return the entire array.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
const newArray = array.slice();
console.log(newArray); // [1, 2, 3, 4, 5]
If you provide the start
parameter, it will start at that index and go until the end of the array.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
const newArray = array.slice(2);
console.log(newArray); // [3, 4, 5]
The start
parameter can be negative to start at the end of the array.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
const newArray = array.slice(-2);
console.log(newArray); // [4, 5]
When you provide both the start
and end
parameters, it will return the elements between those two indexes.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
const newArray = array.slice(1, 3);
console.log(newArray); // [2, 3]
splice
The splice
method will directly modified the array, essentially adding or removing elements from it using the optional start
and count
parameters.
When you only provide the start
parameter, it will remove all elements from that index to the end of the array.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
array.splice(2);
console.log(array); // [1, 2]
When you provide both the start
and count
parameters, it will remove count
number of elements, starting at the start
index.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
array.splice(1, 2);
console.log(array); // [1, 4, 5]
You can pass an unlimited number of parameters to the splice
method. Every parameter after the count
parameter will be added to the array.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
array.splice(1, 2, "a", "b", "c");
console.log(array); // [1, "a", "b", "c", 4, 5]
This means that you can set count
to 0
with additional parameters to add to the array.
JAVASCRIPTconst array = [1, 2, 3, 4, 5];
array.splice(1, 0, "a", "b", "c");
console.log(array); // [1, "a", "b", "c", 2, 3, 4, 5]
Conclusion
Hopefully this post has helped you understand the difference between JavaScript array's slice
and splice
methods and how they work. Remember, the slice
method is immutable and the splice
method is mutable.
Resources
- Getting Started with TypeScript
- Getting Started with Solid
- Create an RSS Reader in Node
- Getting Started with Electron
- How to build a Discord bot using TypeScript
- How to deploy a Deno app using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Using Push.js to Display Web Browser Notifications
- Getting Started with React