JavaScript Abuse — Article 3. Slice VS. Splice: Another Battle Royale
Tags: javascript, webdev, beginners, programming
Published: 2023-08-19 18:26:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g173xxtcn2zes7dg7dmv.png)

Hello everyone! This post will be super short and quite comprehensive (truly hope so). I was actually selfishly in a need for that post 'cause even if I work with JS all the time, I still look up these **two bad boys**: `slice` and `splice`.

Today we're cooking:

* **Slice**

* **Splice**

The things to consider while working with the aforementioned methods were that both are used on arrays and both remove elements from the array. It is a little bit confusing, huh!? Why have them both then? 

Okay, without further ado let's look at the aforementioned methods step by step!

## Splice

When I learnt about `splice` long long time ago I realized that the name of the method reminded me of **comma splices** from my linguistics past.

> Comma splices occur when two independent clauses are incorrectly joined with a comma.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lwvpejsrt323ac9b3d1.png)
*Image Source: Tolchik / iStock / Getty Images Plus*

It helped me so much to wrap my mind around the method: aha-ha, so to splice is kinda "to combine". 

**Splice** as an ordinary word is better explained with pizza:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl31nikjv0joxhe13lx7.png)
*Image Source: Vector Stock*

You see how those pizza slices are all different? Like I just replaced all the parts which used to be just Margarita with a crazy mix of flavours from all over the place?

If we look at the content of splice method in a technical way, then here it is:

`array.splice(start,``deleteCount, el1, el2, ..., el)`

* **our initial array changes**

* `start` is the index at which the array starts ‘splicing’

* `deleteCount` is the number of values to be deleted from the `start`. If the value is `0`, nothing will be deleted

* `el1` to `el` are the values that will be added after the `start`

And now let's splice that pizza! I only will divide pizza in two equal flavours for you to get the idea😉

```javascript
    let array = ["margarita", "margarita"];
    let splicedValue = array.splice(1, 1, "pepperoni");
    console.log(array); // [ "margarita", "pepperoni" ]
    console.log(splicedValue); // [  "margarita" ]
```

Look! We changed one pizza part from margarita to pepperoni!

## Slice

`Slice` is so popular that it's got its own [page on wiki](https://en.wikipedia.org/wiki/Array_slicing)!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exgj88h73nikhv7qcuzn.png)
*Image Source: FreePick*

Oh no, that pizza's slice is being taken away! Let's see how it works in a code! 

`array.slice(start, end)`

* returns a **new** array of elements

* `start` is the index at which the array starts slicing

* `end` is the index at which the array stops slicing

* the value at the last index is **excluded**

```javascript
    let array = [ "margarita", "pepperoni" ];
    let slicedArray = array.slice(1)
    console.log(array); // [ 'margarita', 'pepperoni' ];
    console.log(slicedArray); // [ "pepperoni" ]
```

We didn't change the whole pizza as you see but we still took a slice of pepperoni pizza from our mixed marvel.

Okay, to sum up, I wanted to provide you with some visuals. 

## Comparison Table

![](https://cdn-images-1.medium.com/max/2000/1*KH1dXxFFnoB7XTQFAe_shg.png)

Opt out for now. But can’t wait to see you again soon!

Sources

1. Wikipedia (Array Slicing):[https://en.wikipedia.org/wiki/Array_slicing] (https://en.wikipedia.org/wiki/Array_slicing)

2. Indiana University of Pennsylvania (Comma Splices): [https://www.iup.edu/writingcenter/writing-resources/punctuation/comma-splices.html#:~:text=Comma%20splices%20occur%20when%20two,to%20create%20two%20separate%20sentences](https://www.iup.edu/writingcenter/writing-resources/punctuation/comma-splices.html#:~:text=Comma%20splices%20occur%20when%20two,to%20create%20two%20separate%20sentences)

3. MDN Web Docs (Array.prototype.splice()): [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice]

4. MDN Web Docs (Array.prototype.slice()): [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)