JavaScript array.prototype.slice() Method Explained

Home » Programming Language » JavaScript » JavaScript array.prototype.slice() Method Explained

JavaScript’s Array slice() method returns a copy of array as new array, For returning the new array it accepts parameters which are optional as well, start which is inclusive and an end which is exclusive which means if you have passed 1 as start(index) and 3 as end(index) then slice will return a new copy of your given array which will contain two values(indexes). The slice() method does not change the original array. end is treated as end-1 internally in slice() method of 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' ]

JavaScript Array.Prototype.slice() Syntax

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

As you can see you can use slice() method in multiple ways it depends on you how you want to use because as you have seen in above code you can use negative indexes as well to access the values of array to create your own new array as of needed.

JavaScript Array.Prototype.slice() Parameters

start (optional)

Zero-based index at which to start extraction.

Negative index can be used, and it selects from the end of the array. slice(-3) extracts the last three elements in the sequance.

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

if start is greater than the length of the sequence(array), an empty array will return.

end (optional)

The index of the first element to exclude from the returned array. slice extracts up to but not including end which means end-1.

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

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

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

Return value of slice() function

Array method slice() returns a new array containing the extracted elements based on 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' ]

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

JavaScript slice() Negative Index

In JavaScript slice() method, you can use negative index for start and end parameters. The index of the last element is -1, and the index of 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' ]

Output:

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

Objects as Array Element JavaScript slice()

let car = {
  companyName: "Maruti Suzuki",
  country: "INDIA",
}

let arr = [car, "12,13,381", "2002"]
let cars = arr.slice()

// original object is at index 0
console.log(cars[0]);

// replacing object with new
let toyota = {
  companyName: "Toyota",
  country: "INDIA",
}
cars[0] = toyota
// changes are reflected
console.log(cars[0]);

// you can also update the keys individually
// as well
// change companyName back to Maruti Suzuki
cars[0].companyName = "Maruti Suzuki"

// changes are reflected
console.log(cars[0]);