Slice vs Splice in JavaScript

Slice vs Splice in JavaScript

Sat Apr 02 2022

11 min read

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:

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)

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 ✌

JavaScript Array