Javascript Array Slice Method
Tags: webdev, javascript, typescript, beginners
Published: 2022-10-16 19:22:20

The `slice` method on arrays returns a shallow copy of a part of an array. It takes two numbers, a `start`, and an `end`. Every array has a `slice` method. Here is a quick example:
```javascript
let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let newArray = myArray.slice(2, 3);

console.log(newArray); // [ '🔑' ]
```

There are two optional parameters for the `slice` method, `start`, and `end`. You can provide both, only `start`, or neither, if you like - so all of these are valid:
```javascript
let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  // [ '🔑' ]

let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = arrayTwo.slice(2);  // [ '🔑', '🔩' ]

let arrayThree = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayThreeSlice = arrayThree.slice();  // [ '⚡️', '🔎', '🔑', '🔩' ]
```

### start
This is the index of the first item to include in your new array. For example, if set to `2`, the `slice` will start your new array copy at index 2. If a negative is used, it indicates offset from the end of a sequence. For example:
```javascript
let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(-2);  // [ '🔑', '🔩' ]
let arrayOneSliceAgain = arrayOne.slice(-1);  // [ '🔩' ]
```
### end
This is the first element to **exclude** from your sliced array - which is kind of confusing. You might expect `end` to represent the last item to include - but instead it is the first item to exclude. Keep that in mind if you use `slice`! If you omit this argument, the `slice` method will simply continue to the end of the array, as shown in this example:
```javascript
let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = myArray.slice(2);  // [ '🔑', '🔩' ]
```

If a value greater than the array length is used, `slice` only continues to the end of the array. If a negative value is used, it indicates an offset from the end of an array. For example, `(2, -1)` will go 2 from the start, and -1 from the end of an array:
```javascript
let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, -1);  // [ '🔑' ]
let arrayOneSliceAgain = arrayOne.slice(1, -1);  // [ '🔎', '🔑' ]
```

## Using slice to make a copy of an array
Slice **does not** mutate the original array. It instead creates a new **shallow copy**. As such, your existing array will still continue to contain the same values:

```javascript
let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  

console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '🔑' ]
```

Since `slice` makes a **shallow copy** of an array, it is also sometimes used to duplicate and make copies of your array data. For example, an empty `slice` function will also create a new array in memory - allowing you to have two copies of the same array with the same reference in memory:

```javascript
let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice();

arrayOneSlice[2] = '⚡️'
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '⚡️', '🔎', '⚡️', '🔩' ]
```

This can be useful in some scenarios. However, `slice` only makes a shallow copy of an array. That means things get a little confusing when you have objects in your array. Consider the following array:
```javascript
let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]
```

This array contains an object within it. Let's try making a sliced copy of this array, and then update `items`:
```javascript
let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]
let arrayOneSlice = arrayOne.slice(0, 2);

arrayOneSlice[0].items = [ '🔎' ];
arrayOneSlice[1] = '🔎';

console.log(arrayOne); // [ { items: [ '🔎' ]}, '👨‍💻', '😄', '🐔' ]
console.log(arrayOneSlice); // [ { items: [ '🔎' ]}, '🔎' ]
```

Wait, **what**? We changed `arrayOneSlice`'s `items` object, but its changed in both `arrayOne` and `arrayOneSlice`! Meanwhile, `arrayOneSlice[1]` has only changed `arrayOneSlice`! Welcome to another Javascript quirk. In the first example, using the `arrayOneSlice[0].items` notation, Javascript interprets this as updating an existing element within the shallow copy and thus it affects the original. However, somewhat confusingly, by using the `arrayOneSlice[1]` notation, Javascript interprets this as putting a new value into the `[1]` place of the shallow copy itself.

That means that although it may **seem** like you are making a copy with `slice` when working with simple arrays, this does **not** hold up when using it on more complex objects. Knowing this little piece of trivia is going to save you a lot of time someday.

## Conclusion
The Javascript slice method is useful for creating new shallow copies of arrays with a subset of the original arrays data. It can also be used in a limited way to make duplicates that can be independently updated. Javascript slice copies still have the same reference as the original in memory, which is useful to know when manipulating them.

I hope you've enjoyed this guide. [For more Javascript, check out my other articles here](https://fjolt.com/category/javascript).