Slice Vs Splice in Javascript
Tags: webdev, javascript, beginners, programming
Published: 2022-06-14 05:25:41

_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**

```json
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.

```json
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**

```json

`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**

```json
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**

```json
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 myFish[3](i.e 'mandarin') got removed.


**Replacing elements**

```json
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 myFish[2](i.e 'drum') 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 **