Slice Vs Splice in Javascript

#webdev #javascript #beginners #programming

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 *

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more