Array.Prototype.slice() method explained JavaScript – DEV Community

Javascript’s array slice() method returns a copy of the array as new array, to return the new array it accepts parameters which are also optional, a start which is inclusive and an end which is exclusive meaning That is if you passed 1 as start (index) and 3 as end (index), then slice will return a new copy of your given array containing two values ​​(index). The slice() method does not change the original array. The end is treated as end-1 internally in the slice() method of the array.

Example


const cars = ['Toyota', 'Volkswagen','Daimler','Ford Motor','Honda','BMW','Hyundai','Nisaan','Renault','Kia'];

// no value
console.log(cars.slice());
// expected output: [ 'Toyota', 'Volkswagen', 'Daimler', 'Ford Motor', 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault', 'Kia' ]

// single index
console.log(cars.slice(4));
// expected output: [ 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault', 'Kia' ]

// from middle index
console.log(cars.slice(4,7));
// expected output: [ 'Honda', 'BMW', 'Hyundai' ]

// from beginning of the index
console.log(cars.slice(0,4));
// expected output: [ 'Toyota', 'Volkswagen', 'Daimler', 'Ford Motor' ]

// negative index
console.log(cars.slice(-4));
// expected output: [ 'Hyundai', 'Nisaan', 'Renault', 'Kia' ]

// from index 6 to -3(excluded)
console.log(cars.slice(4,-1));
// expected output: [ 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault' ]

enter fullscreen mode

exit fullscreen mode

JavaScript Array.Prototype.slice() syntax


slice()
slice(start)
slice(start, end)

enter fullscreen mode

exit fullscreen mode

As you can see you can use slice() method in many ways, it is up to you how you want to use because as you have seen in above code, you can use slice() method to create your new array. You can use negative index to access the values ​​of array. as required.

JavaScript Array.Prototype.slice() Parameters

start (optional)

The zero-based index at which to start the extraction.

Negative indices can be used, and it selects from the end of the array. slice(-3) Removes the last three elements in the sequence.

If start is omitted or undefined, the slice index starts at 0.

If the start is greater than the length of the sequence (array), an empty array will be returned.

end (optional)

The index of the first element to exclude from the returned array. The piece concludes till the end but does not include the end which means end-1.

A negative index may be used, indicating the offset from the end of the sequence.

If end is omitted or undefined, the slice extracts through the end of the sequence array. length.

If the end is greater than the length of the sequence, the slice is extracted to the end of the sequence array. length.

The return value of the slice() function

The array method slice() returns a new array containing the extracted elements based on the provided parameters.

Javascript slice() method


const cars = ['Toyota', 'Volkswagen', 'Daimler', 'Ford Motor', 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault', 'Kia'];

// slicing the hole array from starting to end
let ncars = cars.slice();
console.log(ncars);
// [ 'Toyota', 'Volkswagen', 'Daimler', 'Ford Motor', 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault', 'Kia' ]


// slicing from the middle of the array
let middleIndex = Math.floor(cars.length / 2);
let middleArr = cars.slice(middleIndex);
console.log(middleArr);
// [ 'BMW', 'Hyundai', 'Nisaan', 'Renault', 'Kia' ]



// slicing from the second element to second last element
let second = 1;
let secondLast = cars.length - 1;
let almostFull = cars.slice(second, secondLast);
console.log(almostFull);
// [ 'Volkswagen', 'Daimler', 'Ford Motor', 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault' ]

enter fullscreen mode

exit fullscreen mode

Output:


[ Toyota, Volkswagen, Daimler, Ford Motor, Honda, BMW, Hyundai, Nisaan, Renault, Kia ]
[ BMW, Hyundai, Nisaan, Renault, Kia ]
[ Volkswagen, Daimler, Ford Motor, Honda, BMW, Hyundai, Nisaan, Renault ]

enter fullscreen mode

exit fullscreen mode

Javascript slice() negative index

In the JavaScript slice() method, you can use negative indices for the start and end parameters. The index of the last element is -1, and the index of the second last element is -2, and so on.


const cars = ['Toyota', 'Volkswagen', 'Daimler', 'Ford Motor', 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault', 'Kia'];

// slicing the array from second-to-last
let narr = cars.slice(1,-1);
console.log(narr);
// [ 'Volkswagen', 'Daimler', 'Ford Motor', 'Honda', 'BMW', 'Hyundai', 'Nisaan', 'Renault' ]

// slicing array from from last four
let lastfour = cars.slice(-4);
console.log(lastfour);
// [ 'Hyundai', 'Nisaan', 'Renault', 'Kia' ]

// both negative indexes
let bothNegative = cars.slice(-5,-2);
console.log(bothNegative);
// [ 'BMW', 'Hyundai', 'Nisaan' ]

enter fullscreen mode

exit fullscreen mode

Output:


[ Volkswagen, Daimler, Ford Motor, Honda, BMW, Hyundai, Nisaan, Renault ]
[ Hyundai, Nisaan, Renault, Kia ]
[ BMW, Hyundai, Nisaan ]

enter fullscreen mode

exit fullscreen mode

This article was originally posted on programmingeeksclub.com

My Personal Blogging Website: Programming Geeks Club
My Facebook Page: Programming Geeks Club
My Telegram Channel: Programming Geeks Club
My Twitter Account: Kuldeep Singh

Leave a Comment