Javascript: No more confusion — Splice vs Slice
Tags: javascript, webdev, programming, discuss
Published: 2022-02-22 10:02:30

They were built for different purposes but they look same in several scenarios. I will clear confusion first instead of dragging it to the end of the article.

**Tip 1:** Look at their meanings

``Splice:`` join or connect (a rope or ropes) by interweaving the strands at the ends.

`Slice:` cut (something, especially food) into slices.

Ok. First I should thank Google for their meanings. Thank you, Google. 😃

Hope you got cleared to some extent.

**Tip 2:** Not a very intuitive tip but it is worth clearing your confusion a little more. `Splice` — text `length` is greater than the `slice`. Based on which remember, the splice can take more params when compared to slice. See the declaration here:

`arr.splice(start, deleteCount, item1, item2, ..., itemN);`

`arr.slice(start, end);`

**Tip 3:** It's a technical tip here. Splice mutates original array whereas slice won’t.

Just remember, if someone asks bread slice what would you do.

Don’t need to remember every tip. Just remember one that caught your attention.

➡️ Also, if you have remembered in another way. Please do comment.

**Now, tech stuff. What do they really do?**

**Splice first:**

It is an array method that works only on JS arrays. It removes, replaces, and/or adds new elements in the array.

mutates original array.

`splice(start, deleteCount, item1, item2, ..., itemN);`

`start` — where to start changing the array.

`deleteCount`— no.of elements to remove from the start and is optional.

`item1, item2 and so on` — to add elements to the array after the start.

splice returns removed items in an array if none then returns an empty array.

{% embed https://gist.github.com/K-Vishwak/7a91e0fd55821b60177f56d949f4f69e %}


➡️ I hope, the above examples covered all scenarios. If you find any more interesting scenarios, please comment. I am very much happy to update the article with your suggestion any time.

**Slice now**

Slices the array and returns a shallow copy.

Doesn’t mutate (alter) the original array

slice(start, end); - slice from start (including) to end (excluding) and accepts negative values.

```javascript

const mainArr = ['Apple', 'banana', 'mango', 'grapes', 'orange'];

const shallowArr = mainArr.slice(1,4);
shallowArr
> ['banana', 'mango', 'grapes']

// only start index till end of the arr.
const onlyStart = mainArr.slice(3);
onlyStart
> ['grapes', 'orange']

// start greater than array length.
const startGreaterThanIndex = mainArr.slice(5);
startGreaterThanIndex
> []

// copy everything.
const copyArr = mainArr.slice();
> ['Apple', 'banana', 'mango', 'grapes', 'orange']

// with negative start and end. Negative values represents offset from end of the array.
const negativeSlice = mainArr.slice(-1);
negativeSlice
> ['orange']

const negativeRange = mainArr.slice(-3, 2);
negativeRange;
> []

const negativeRange1 = mainArr.slice(-3, -2);
negativeRange1;
> ['mango']

const negativeIndex = mainArr.slice(-4);
negativeIndex;
> ['banana', 'mango', 'grapes', 'orange']

const negativeGreaterOffset = mainArr.slice(-6);
negativeGreaterOffset;
> ['Apple', 'banana', 'mango', 'grapes', 'orange']

```

Similar to slice in Array, there is a slice in String as well. Which also acts in the same manner but works on strings.

Thank you. 😊

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>