DEV Community

Deepa Chaurasia
Deepa Chaurasia

Posted on • Updated on

Slice Vs Splice in Javascript

A lot of us often get confused between these methods .We end us googling every time we use them .I will try to make it pretty clear in your head .

So What's Slice??

Slice ==> copying the whole or a part of array.

Slice()- The slice() method copies a given part of an array and return that copied part as a new array.

So let's say you have a requirement where you don't want to alter your original array but perform some operations on it.

You'll use slice in this case , It will copy the exact array and then you can perform operations on those.

  • It doesn't change original array.

  • It copies the whole array or part of it acc to our requirement.

How to use it??

Syntax:
array.slice(from,untill)

From- Slice the array starting from specified index.
Until-Slice the array until another element index.

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)

// citrus contains ['Orange','Lemon']
Enter fullscreen mode Exit fullscreen mode

You can notice the slice () method doesn't include the last given element.

So here we have given index from 1 to 3 ,therefore
fruits[1]---> 'Orange' //included
fruits[2]---> 'Lemon' //included
fruits[3]---> 'Apple' //not included

Remember the end index elements are not included in slice().

We can also use it without parameters ,it will copy the whole array

let citrus=fruits.slice();

// citrus contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']

Enter fullscreen mode Exit fullscreen mode

Splice()

  • It is used for adding/removing/replacing elements from array.
  • It mutate/alter the array unlike slice().

How to use??

For removing elements,we need to give indes and no of elements to be removed.

Syntax:
array.splice(index,no of elements)

Index-starting point to remove.

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2)

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]
Enter fullscreen mode Exit fullscreen mode

If you pass only one parameter ,it will remove all elements from starting index.

Inserting elements


`let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed`
Enter fullscreen mode Exit fullscreen mode

It will remove 0 elements ,that means we are only inserting 'drum' at the index 2 .

One thing you'll notice here that we use '0' as second parameter while inserting elements at certain position.

Removing 0 elements

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum', 'guitar')

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
Enter fullscreen mode Exit fullscreen mode

It is pretty much like inserting elements I have explained above.

Removing 1 element

let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
let removed = myFish.splice(3, 1)

// myFish is ["angel", "clown", "drum", "sturgeon"]
// removed is ["mandarin"]
Enter fullscreen mode Exit fullscreen mode

Here, you'll notice notice we have define I want to remove 1(no of elements) from index 3.Therefore myFish3 got removed.

Replacing elements

let myFish = ['angel', 'clown', 'drum', 'sturgeon']
let removed = myFish.splice(2, 1, 'trumpet')

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]
Enter fullscreen mode Exit fullscreen mode

Here you can notice at index 2 which is myFish2 got removed as we have specified second argument (i.e no of elements as 1) so 1 element on the index one itself got removed.

** Remember We use '0' as second argument if we wanna insert element. We use 1 if we want to replace **

*Thanks for reading ,Please like,share and comment *

Discussion (5)

Collapse
lukeshiru profile image
Luke Shiru

I would say the TL;DR, is:

  • Array.prototype.slice: Use this method to get a portion of an array.
  • Array.prototype.splice: Every time you use this method a dev dies, it's evil!

Jokes aside, we should try to avoid array mutation methods and stick to the ones that don't mutate. To know which is which, check this great site.

Cheers!

Collapse
andrewbaisden profile image
Andrew Baisden

Good comparison fix those markdown code blocks by adding syntax highlighting 😉

Collapse
deepachaurasia1 profile image
Deepa Chaurasia Author

Actually u have done that on my medium blog ,but here I have choose add code provided by them and it is showing like this

Collapse
andrewbaisden profile image
Andrew Baisden

Go here markdownguide.org/extended-syntax/ and scroll down to Syntax Highlighting and then you will learn how to do it 🙂

Thread Thread
deepachaurasia1 profile image
Deepa Chaurasia Author

thanks andrew It helped :)