Javascript Slice Array Method

The slice method is one of the built-in methods you can use on Array instance in Javascript. The method selects a portion of an array by the start and end index and returns a shallow copy of that array portion without mutating the original array.

The slice method have two optional parameters, start and end. Both are converted to numbers and represent a zero-based index of item within the array.

Let's start with the simplest example by calling the slice method without any arguments:

const animals = ['Cat', 'Dog', 'Bird'];

console.log(animals.slice());
// 👉 Array(3) [ "Cat", "Dog", "Bird" ]

If we do not specify any index, the method will return a shallow copy of an array with same items.

When is calling slice method without any arguments useful? Well, in some situations you might need to create a copy of an array without affecting the original one. For example, you want to run some side effects or mutating methods on an array but still want to retain the original.

Now let's add a start index parameter to see what happens.

const animals = ['Cat', 'Dog', 'Bird'];

console.log(animals.slice(1));
console.log(animals.slice('1')); // Gets converted to number 1
// 👉 Array [ "Dog", "Bird" ]

console.log(animals.slice(2));
// 👉 Array [ "Bird" ]

Remember that the index parameter is zero-based, same as items within the array. The number 1 means that the array would be sliced from the second item until the end of an array.

const animals = ['Cat', 'Dog', 'Bird'];

console.log(animals.slice(1, 2));
console.log(animals.slice('1', '2'));
// 👉 Array [ "Dog" ]

console.log(animals.slice(0, 2));
// 👉 Array [ "Cat", "Dog" ]

console.log(animals.slice(1, 1));
// 👉 Array []

As you can see, adding end index parameter stops the slice at the specified index.

The index parameter can be negative integer as well.

const animals = ['Cat', 'Dog', 'Bird'];

console.log(animals.slice(-1));
console.log(animals.slice('-1')); // Gets converted to number -1
// 👉 Array [ "Bird" ]

console.log(animals.slice(0, -1));
// 👉 Array [ "Cat", "Dog" ]

Finally, keep in mind that passing indexes out of range returns empty array instead of an error. Furthermore, passing undefined values or negative indexes greater than the length of the array, you'll get all items.

const animals = ['Cat', 'Dog', 'Bird'];

console.log(animals.slice(-5));
console.log(animals.slice(''));
console.log(animals.slice(null));
console.log(animals.slice(undefined));
// 👉 Array(3) [ "Cat", "Dog", "Bird" ]

console.log(animals.slice(5));
// 👉 Array []

When to use the slice method?

1. Copying the whole array: You can simply use the method to make a shallow copy of the array.

2. Creating a subset: Use slice when you want to create a new array that is a subset of the original array without mutating it. As mentioned, this is extremely useful when you need to apply some side effects and mutate the subset but retain the original array.

3. Converting array-like objects: Finally, you can also use slice with call or apply keywords to convert array-like objects (for example NodeList) into regular arrays.

Considerations:

• The slice method does not modify the original array, which is useful when you want to avoid mutations on original array.

• It's faster compared to using filter for same operations, although for very large arrays, you might want to work with indices directly

• Method allows great flexibility but can result in unexpected result if you pass index out of range or use wrong negative index.

To sum it up, slice method is about extracting or copying part of an array without mutating the original source.