JS By Example: 8 Distinct Uses Of JavaScript Array Slice
Tags: javascript
Published: 2018-08-31 15:31:54

---
title: JS By Example: 8 Distinct Uses Of JavaScript Array Slice
published: true
tags: javascript
canonical_url: https://zendev.com/2018/08/29/uses-for-javascript-slice.html
---

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](https://www.sitepoint.com/functional-programming-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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), `slice` isa 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 idiomatic to use the [spread operator](https://dev.to/kball/understanding-the-spread-operator-in-javascript-48op) for this functionality, but if working in older codebases or without a build step that uses babel you may still want to use `slice`.

### Use 2: Subarray starting at N

The simplest way to use the `slice` method is simply to grab all elements of an array starting at N.

An example use case might be you want to pop off the first element of an array and use it, returning the remaining array, but you want to do it without modifying the original array.

```
function useOne(arr) {
  const usedItem = arr[0];
  // do something with usedItem
  return arr.slice(1);
}
```

### Use 3: last N of an array

Another way that `slice` can be used is to grab the end of an array, taking advantage of the fact that negative indexes count back from the end.

This negative indexing makes it super simple to strip off however many elements you want. For example, if you want to grab just 3:

```
const last3 = arr.slice(-3)
```

### Use 4: first n of an array

The pull off the front of an array, we need to start using the second argument to the method as well: `end`.

When both arguments are passed, the `slice` method returns a set starting at `begin` up to but not including `end`.

Since JavaScript arrays are zero-based (index starts at 0), this makes it super simple to pull off the first N elements:

```
const first4 = arr.slice(0, 4)
```

### Use 5: inner segment of n, starting at m

Generalizing use 5, what if we want to use `slice` to pull off a segment of the array starting at any index?

To do this, we need to translate from `(begin, length)`, to `(begin, end)`. Luckily, the math is straightforward and we can define a simple function to do this:

```
function pullSegment(arr, begin, length) {
  return arr.slice(begin, begin + length);
}
```

## Working With Array-like Objects

The `slice` method can also be used on array-like objects. These are objects that behave _mostly_ like arrays, but are not actually arrays. These are essentially any object that includes a `length` value and can be accessed via numerical indexes, but do not include Array methods.

Some examples include `arguments` (keyword for accessing all arguments passed to a function), `NodeLists` (returned from any DOM API method that returns a list of nodes), and even raw objects that use numerical indices and add a `length` attribute.

To use the `slice` method on an array-like object, you need to reference it directly from `Array.prototype`, like this:

```
Array.prototype.slice.call(arguments);
```

This leads to a couple valuable uses:

### Use 6: Convert array-like objects into arrays

One common use for the Slice operator on array-like objects is to convert them into actual arrays. For example:

```
const args = Array.prototype.slice.call(arguments);
```

Why would you want to do this? To get access to array methods. For example, imagine a function that looks like this:

```
function addOne() {
  return arguments.map(i => i+1);
}
```

Seems like it would work, but if you try to do this you get:

```
> addOne(1, 2, 3)
TypeError: arguments.map is not a function
    at test (repl:2:18)
    at repl:1:1
    at ContextifyScript.Script.runInThisContext (vm.js:44:33)
    at REPLServer.defaultEval (repl.js:239:29)
    at bound (domain.js:301:14)
    at REPLServer.runBound [as eval] (domain.js:314:12)
    at REPLServer.onLine (repl.js:440:10)
    at emitOne (events.js:120:20)
    at REPLServer.emit (events.js:210:7)
    at REPLServer.Interface._onLine (readline.js:279:10)
```

This is because `arguments` is not actually an array, but an array-like object. You can implement this function using `slice` as follows:

```
function addOne() {
  return Array.prototype.slice.call(arguments).map(i => i+1);
}
```

and now you get what you'd expect:

```
> addOne(1, 2, 3)
[2, 3, 4]
```

### Use 7: Coerce arbitrary length extra arguments into an array

Sometimes you want to allow for arbitrary numbers of arguments to a function.

Newer versions of JavaScript have introduced what is known as [rest syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) to handle this, but if you are stuck supporting older browsers without a transpilation system, you can do this with `slice`:

```
function myFunc(a, b) {
  const extraArgs = Array.prototype.slice.call(arguments, 2);
}
```

This allows calling myFunc with arbitrary numbers of args. e.g.:

```
myFunc(1, 2, 3, 4, 5, 6, 7, 8)
```

And inside you'll end up with `a === 1`, `b === 2`, and `extraArgs === [3, 4, 5, 6, 7, 8]`

## Functional Array Manipulation

Another huge area of use for `slice` is to manipulate arrays in a functional/pure way, without modifying the original array.

### Use 8: modifying a particular index in an array

A powerful and common use of `slice` in a functional context is to replace the value of a particular item in an array.

Imperatively this is simple, you just assign the new value, but in a functional world you can't modify the original array.

Instead, you can combine `slice` with the new [JavaScript spread operator](https://dev.to/kball/understanding-the-spread-operator-in-javascript-48op) to return a new array that is identical but for the index you want to update:

```
function replaceIdx(arr, index, newVal) {
  return [
    ...arr.slice( 0, index ),
    newVal,
    ...arr.slice( index + 1)
  ],
}
```

### Partial Function Application

Another common pattern in functional programming is what is known as [partial function application](https://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-functions/#partialapplication): pre-applying parameters to a function, and then returning a new function.

This pattern allows you to compose functions, creating greater reusability by letting you use the same core functions with different pre-applied parameters.

While more pure functional languages like Haskell [support partial function application natively](https://wiki.haskell.org/Partial_application), in JavaScript we can implement a function to do it using `slice`:

```
var partial = function() {
  const fn = arguments[0];
  const args = Array.prototype.slice.call(arguments, 1);

  // Return a function that calls fn
  return function() {
    var remainingArgs = Array.prototype.slice.call(arguments);
    return fn.apply(this, args.concat(remainingArgs));
  }
}
```

## Wrapping Up

As you can see by this point, the Array `slice` method is an incredibly useful tool in your JavaScript toolchest, especially as you start moving towards more functional ways of programming.

I'm confident there are many more great examples of using `slice` - if you have a good one, share it in the comments below! I'll happily update the post.

* * *

P.S. - If you're interested in these types of topics, you should probably [follow me on Twitter](https://twitter.com/kbal11) or join my mailing list. I send out a weekly newsletter called the ‘[Friday Frontend](https://zendev.com/friday-frontend.html)’. Every Friday I send out 15 links to the best articles, tutorials, and announcements in CSS/SCSS, JavaScript, and assorted other awesome Front-end News. Sign up here: [https://zendev.com/friday-frontend.html](https://zendev.com/friday-frontend.html)