Understanding Slice Method In Javascript
Tags: javascript, webdev, beginners, programming
Published: 2022-08-23 18:33:00

Hey there 👋, I have explained [Splice](https://dev.to/swasdev4511/array-splice-method-3akg) method in my previous post. 
Here I am going to explain **slice** method with some examples.
Although there is not much difference in their names ( just an extra p , right ) but they differ so much in their mechanism or how they work. 

> _Slice method does not mutate the original array._

- Yeah, you have read it right. Unlike splice method, slice method does not change the contents of the original array.

- Rather it returns a copy of the segment / fraction / slice of an original array ( more precisely a [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) ).


Take a look at syntax :

```
slice(start, end)
```
**Note** : start and end both can be **<u>optional</u>**. 

- To understand this we will directly jump into examples.
- And for that we will start with simple scenarios

Now we can divide this in three parts : 

1. slice without arguments : slice()
2. slice with start : slice(start)
3. slice with both start and end : slice(start, end)

Let's take a look at them one by one.

---

```
slice()
```

## Example - 1

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice();
console.log(' result - 1 ', resultedArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];
```

- From the above example you might be wondering the original array and resulted array are exactly same.Then what the heck is the use of the slice method here.

- Well it returns a copy ( [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) ) of an original array.

- Following code block explains it.

```
let products = [ { id : 100 , productName : 'Mobile', manufacturer : { id : 1 , countryCode : 'USA'}} ,{ id : 101 , productName : 'TV'}, { id : 102 , productName : 'Washing Machine', manufacturer : { id : 2 , countryCode : 'CAN'}} ];

let resultedArray = products.slice();

console.log( ' products ', products);
console.log( ' resultedArray ', resultedArray);

// To check their equality 
console.log( ' Equality ', products === resultedArray ) // false

// To check the equality of child nodes ( nested keys )
console.log(' child node ', products[0].manufacturer === resultedArray[0].manufacturer );   // true

```

- As we check for the equality of parent object, it clearly gives us indication that both the objects are not same.

- When we check for the equality of nested objects, it indicates that both are same. 

> _That means slice method does make a shallow copy._
 

---

```
slice(start)
```

## Example - 2

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2);
console.log(' result - 1 ', resultedArray);   // [3, 4, 5, 6, 7, 8, 9];
```

- Here in the above example slice method gives a slice or the portion of the array that starts with specified index to the end of the array.

- Nothing fancier right, but wait there are several use cases start can be +ve , -ve , zero & index out of bound.

- Let's look at them one by one.

## Example - 3

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(-2);
console.log(' result - 1 ', resultedArray);   // [8, 9];
```

- When the start is specified as -ve integer then it will point from the end of the array and slice / gives the portion of an array till the end.

## Example - 4

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(0);
console.log(' result - 1 ', resultedArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];
```

- When the start is 0. It simply creates a copy. 

> slice() <=> slice(0)

## Example - 5

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(20);
console.log(' result - 1 ', resultedArray);   // [];
```

- When the start is index out of bound ( i.e greater than array length ) then it will return an empty array.

---

```
slice(start, end)
```
## Example - 6

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2, 4);
console.log(' result - 1 ', resultedArray);   // [3, 4];
```

- In the above example slice method gives us a portion of array starting from start index - 2 upto end index but **<u>excludes the element at end index</u>**

- Thus we get elements 3 and 4 at the index 2 and 3 respectively ( we did not get element present at index 4 );

> _When the end is specified then element at that position is excluded in the resulting array after slice_ 

- Now another use case can be end can be -ve. I won't go in details for that as you might have got the idea if you have gone through above examples.

## Example - 7

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2, -4);
console.log(' result - 1 ', resultedArray);  // [3, 4, 5];
```

- Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : [LinkedIn](https://www.linkedin.com/in/swasdev4511/)