JavaScript Array slice()

Odysseas MourtzoukosJuly 3rd, 2023Last Updated: July 3rd, 2023

0 858 5 minutes read

In JavaScript, arrays are a fundamental data structure that allows you to store and manipulate collections of values. One of the most commonly used array methods is slice(). The slice() method returns a shallow copy of a portion of an array into a new array object, without modifying the original array. This powerful method can be used to extract specific elements or create copies of subarrays.

In this guide, we will explore the slice() method in detail, covering its syntax, functionality, and various use cases. We’ll also discuss important concepts related to slice(), such as shallow copies, empty slots, and negative indices. By the end of this guide, you will have a solid understanding of how to leverage slice() effectively in your JavaScript projects.

1. Introduction

Before diving into the specifics of the slice() method, let’s briefly review some basic concepts related to arrays in JavaScript. An array is an ordered collection of values, which can include elements of any data type, such as numbers, strings, objects, or even other arrays. Arrays are commonly used to store and manipulate sets of related data.

JavaScript arrays are zero-indexed, meaning the first element is accessed using the index 0, the second element with index 1, and so on. The length of an array is dynamically determined by the number of elements it contains.

The slice() method provides a flexible way to extract a portion of an array, returning a new array that contains the selected elements. This can be achieved by specifying the start and end indices of the desired portion. The original array remains unchanged.

2. Array.slice() Syntax

The syntax for the slice() method is as follows:

array.slice(start, end)

The array represents the array object on which the slice() method is called. The start parameter specifies the index at which to begin extraction, and the end parameter (optional) represents the index at which to end extraction (exclusive). The slice() method returns a new array containing the selected elements.

It’s important to note that the start index is inclusive, meaning the element at that index will be included in the resulting subarray. On the other hand, the end index is exclusive, so the element at that index will not be included in the resulting subarray.

Let’s consider an example to illustrate the usage of slice():

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const subArray = fruits.slice(1, 4);

console.log(subArray);
// Output: ['banana', 'cherry', 'date']

Fig. 1: JavaScript Array slice() Example 1.

In this example, we have an array called fruits containing five elements. By calling slice(1, 4) on the fruits array, we extract a subarray starting from the element at index 1 (‘banana’) and ending at the element just before index 4 (‘date’), resulting in a new array ['banana', 'cherry', 'date'].

If no end parameter is provided, slice() will extract elements from the start index until the end of the array. Let’s modify our previous example to demonstrate this:

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const subArray = fruits.slice(2);

console.log(subArray);
// Output: ['cherry', 'date', 'elderberry']

Fig. 2: JavaScript Array slice() Example 2.

In this case, calling slice(2) returns a new array containing the elements starting from index 2 (‘cherry’) until the end of the fruits array, resulting in `[‘cherry’, ‘date’, ‘elderberry’]`.

3. Array.slice() Contains Shallow Copies of Array Elements

When using slice(), it’s important to note that the resulting subarray contains shallow copies of the original array’s elements. This means that if the elements are objects or arrays, the copied elements will still reference the same objects or arrays as the original elements.

Let’s consider an example to better understand this concept:

const originalArray = [{ id: 1 }, { id: 2 }, { id: 3 }];

const copiedArray = originalArray.slice();

copiedArray[0].id = 10;

console.log(originalArray[0].id);
// Output: 10

In this example, we have an array originalArray containing three objects. We use slice() to create a copy of the array and assign it to copiedArray. Then, we modify the id property of the first element in copiedArray. As both arrays contain references to the same objects, changing the id property in copiedArray also affects the corresponding object in originalArray.

To avoid modifying the original array when working with objects or arrays as elements, you can create a deep copy of the array using techniques like the spread operator ([...array]) or JSON.parse(JSON.stringify(array)). These methods ensure that the copied elements are separate from the original ones.

const originalArray = [{ id: 1 }, { id: 2 }, { id: 3 }];

const deepCopiedArray = JSON.parse(JSON.stringify(originalArray));

deepCopiedArray[0].id = 10;

console.log(originalArray[0].id);
// Output: 1

In this modified example, we create a deep copy of originalArray using JSON.parse(JSON.stringify(array)). The resulting deepCopiedArray has separate objects from the original array. Modifying the id property in deepCopiedArray does not affect the originalArray.

4. Array.slice() Preserves Empty Slots

Another important behavior to note is that slice() preserves empty slots when creating the new subarray. An empty slot refers to an element that has been explicitly set to undefined or has not been assigned any value.

Consider the following example:

const array = [1, , , 4, 5];

const subArray = array.slice();

console.log(subArray);
// Output: [1, , , 4, 5]

Fig. 3: Array.slice() Preserves Empty Slots.

In this case, the array contains three empty slots represented by consecutive commas. When we call slice() on the array, the resulting subArray will also contain the empty slots. The empty slots are preserved in the subarray as undefined values.

Keep in mind that empty slots behave differently than undefined values. When accessing an empty slot, you will get undefined, but the slot itself still exists in the array.

5. Array.slice() with Negative Indices

The slice() method also supports negative indices, allowing you to extract elements from the end of the array. A negative index represents an offset from the end of the array, where -1 refers to the last element, -2 refers to the second-to-last element, and so on.

Let’s consider an example:

const array = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const subArray = array.slice(-3);

console.log(subArray);
// Output: ['cherry', 'date', 'elderberry']

In this example, calling slice(-3) on the array extracts the last three elements, resulting in ['cherry', 'date', 'elderberry'].

You can also combine positive and negative indices to create subarrays that span both ends of the array:

const array = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const subArray = array.slice(1, -1);

console.log(subArray);
// Output: ['banana', 'cherry', 'date']

In this modified example, we use slice(1, -1) to extract elements starting from the second element (‘banana’) and ending at the second-to-last element (‘date’). The resulting subarray is ['banana', 'cherry', 'date'].

6. Conclusion

The slice() method in JavaScript provides a powerful way to extract portions of an array without modifying the original array. By specifying the start and end indices, you can create subarrays that suit your specific needs. Remember that slice() returns a shallow copy of the elements, preserving empty slots and maintaining references to objects or arrays.

Understanding how to use slice() effectively is essential for manipulating arrays in JavaScript. Whether you need to extract a subset of elements or create copies of specific sections, slice() is a versatile method that can simplify your code and enhance your array operations.