JS By Example: 8 Distinct Uses Of JavaScript Array Slice

The JavaScript array slice method is one of the most powerful and commonly used built-ins in the JavaScript language.

And with the rise of React and other functionally oriented JavaScript practices, it is becoming even more important, for 2 key reasons:

1. Functional programming, particularly higher level functions, works heavily with lists of data
2. Functional programming requires pure functions, functions that do not cause side effects or modify their input data.

The JavaScript array slice method fits both of these criteria.

The slice method provides a mechanism for creating a shallow copy of a subset of a list, without modifying the original list. Thus it provides a key building block for writing functional JavaScript.

In this post we’ll master the slice method by example, exploring 8 different ways it can be used.

Caution: The slice method is not to be confused with the splice method, which modifies an array in place.

Slice leaves the original array intact and returns a shallow copy of selected items, splice modifies the original array.

How Javascript Array Slice Works

Before we dive into some of the more advanced uses, lets look at the basics of the slice method.

As shown in the MDN documentation, slice is a method on an array that takes up to 2 arguments:

arr.slice([begin[, end]])

The begin argument is a 0-based index identifying where to begin extraction, while the end argument is a 0-based index identifying where to end.

The slice method creates a copy of the array starting at begin up to but not including end.

It also accepts negative indices, which indicate counts back from the end of the array.

Basic Uses

Our first 4 uses highlight the core functionality of slice.

Use 1: Simple copy

const arr2 = arr.slice();

Slice without any arguments performs a simple shallow copy. In modern JavaScript it is more…