Slice Vs Splice in Javascript

A lot of us often get confused between these methods .We end up 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']

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']

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"]

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`

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

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"]

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"]

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 *