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() me…


This content originally appeared on DEV Community and was authored by Deepa Chaurasia

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

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`

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

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

Replacing elements

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

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]


This content originally appeared on DEV Community and was authored by Deepa Chaurasia


Print Share Comment Cite Upload Translate Updates
APA

Deepa Chaurasia | Sciencx (2022-06-14T05:25:41+00:00) Slice Vs Splice in Javascript. Retrieved from https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/

MLA
" » Slice Vs Splice in Javascript." Deepa Chaurasia | Sciencx - Tuesday June 14, 2022, https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/
HARVARD
Deepa Chaurasia | Sciencx Tuesday June 14, 2022 » Slice Vs Splice in Javascript., viewed ,<https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/>
VANCOUVER
Deepa Chaurasia | Sciencx - » Slice Vs Splice in Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/
CHICAGO
" » Slice Vs Splice in Javascript." Deepa Chaurasia | Sciencx - Accessed . https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/
IEEE
" » Slice Vs Splice in Javascript." Deepa Chaurasia | Sciencx [Online]. Available: https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/. [Accessed: ]
rf:citation
» Slice Vs Splice in Javascript | Deepa Chaurasia | Sciencx | https://www.scien.cx/2022/06/14/slice-vs-splice-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.