Understanding Slice Method In Javascript

Hey there 👋, I have explained Splice 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 ).

Take a look at syntax :

slice(start, end)

Note : start and end both can be optional.

• 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 ) 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 excludes the element at end index

• 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