DEV Community

Cover image for JavaScript Abuse — Article 3. Slice VS. Splice: Another Battle Royale
JS Queen
JS Queen

Posted on

JavaScript Abuse — Article 3. Slice VS. Splice: Another Battle Royale

Image description

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
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
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😉

    let array = ["margarita", "margarita"];
    let splicedValue = array.splice(1, 1, "pepperoni");
    console.log(array); // [ "margarita", "pepperoni" ]
    console.log(splicedValue); // [  "margarita" ]
Enter fullscreen mode Exit fullscreen mode

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

Slice

Slice is so popular that it's got its own page on wiki!

Image description
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

    let array = [ "margarita", "pepperoni" ];
    let slicedArray = array.slice(1)
    console.log(array); // [ 'margarita', 'pepperoni' ];
    console.log(slicedArray); // [ "pepperoni" ]
Enter fullscreen mode Exit fullscreen mode

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

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

  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

  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

Top comments (4)

Collapse
 
giovannimazzuoccolo profile image
Giovanni Mazzuoccolo

All the methods/functions that doesn't mutate the passed values are +1 for me :)

Collapse
 
jsqueen profile image
JS Queen

Understandably so actually🤓

Collapse
 
ashutoshmishra profile image
Ashutosh Mishra

Great explanation

Collapse
 
jsqueen profile image
JS Queen

I'm glad it was helpful😃