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

#javascript #webdev #beginners #programming

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 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 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" ]

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 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" ]