Slice vs Splice in JavaScript

Hello everyone 👋

when I started learning JavaScript, I was confused about slice & splice methods so, thus I will try to explain it simply without going deep in it so you understand it easily without any confusion.

Slice

Slice means to cut something into pieces or slices. In JavaScript, we use to cut a part of the array as we need just a partial part of the array.

Syntax

slice(start, end);

slice method tasks 2 parameters:

• start: the start index of the array where I should strat cut it.

• end: the end index where I should stop cutting

Note: That the end index will not be a part of the sliced array

Examples

In The First Example, I want to get from index 1 to the element before index 4

const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];

arr.slice(1, 4);  // will return ["Item 2", "Item 3", "Item 4"]

In The Second Example, we want to get from index 3 to the end of the array

const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];

arr.slice(3);  // will return ["Item 4", "Item 5", "Item 6", "Item 7", "Item 8"]

so here we didn't specify the end parameter and when we do that he will take the rest of the array until the end.

Splice

Splice means to connect or join. we use it if we want to add something to the array but in a specific place unlike push or unshift which adds new elements to the end or the beginning of the array. and we use It also to remove something from the array from a specific place.

Syntax

splice(start, deleteCount, item1, item2, itemN);

• start: the start index of the array where I should start changing it.

• deleteCount: the number of elements that I want to delete and if I don't want to remove anything we simply pass 0

• Then the rest of the parameters is the elements we want to add to the array ^_^

Examples

In The First Example, I just want to remove 3 elements from the array starting from the element of index 2

const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];
arr.splice(2, 3);
console.log(arr); // will return ["Item 1", "Item 2", "Item 6", "Item 7", "Item 8"]

In The Second Example, we want to add some new elements from index 5 without removing any elements from the array so will be the first element I will add will be in index 5

const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];
arr.splice(5, 0, "item 9", "item 10");
console.log(arr); // will return  ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "item 9", "item 10", "Item 6", "Item 7", "Item 8"]

In The Third Example, Now let us remove some elements and replace it with other new elements 😄

const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];
arr.splice(2, 3, "item 9", "item 10");
console.log(arr); // will return  ["Item 1", "Item 2", "item 9", "item 10", "Item 6", "Item 7", "Item 8"]

Conclusion

So that's it 😀. Slice returns part of an array while splice adds & removes some elements of an array from a specific index.
Of course, there is a more complex example & usage for them which you can check out later to have a deep understanding of it.

I hope you find this article helpful 🤗

see you next time ✌