Understanding JavaScript Slice and Splice

Subscribe to my newsletter and never miss my upcoming articles

The first time I learnt about splice and slice, it was on a friends Whatsapp status. He was asking why the creators of JavaScript deliberately named the methods similarly knowing their functions are similar too.

Few months later, it was me asking the same question as I always got confused whenever these methods were mentioned.

I'm writing this article partly for myself, as a reference to fall back on on those days when everything seems not to make sense, and for every other person who's either hearing about this for the first time or actually looking for solution or clarity on the concept.

Prerequisite

Well, if you're reading this, then it means one thing, you're finding your way around JavaScript. You should have an idea of JavaScript Arrays. It'll be cool to also have a console handy, so you can quickly try out some of the examples in order to know how they work.

For the sake of newbies (who this article is mostly targeted at), I'll be explaining arrays briefly before we proceed in order to enable you have a clearer understanding of the context.

Let's look at arrays

array.gif Arrays are data structures which can hold values of different data types(boolean, strings, numbers) and store them inside a single variable. Values of an array are enclosed in a square bracket and each of the values are usually separated by commas .

Let a = ["name", 12, true]

Each item in an array is called element and each element can be accessed by a numerical index, starting with 0.

In the array above, the element at index 0 is name and the element at index 2 is true. The element at index 1 in the above array can be accessed like this

a[1]

and this will return 12 However, the length of the above array is 3.

Basic Operations in an array

Some basic operations can be carried out on an array to either add values or remove values. These operations are done with specific JavaScript methods. Let's look at some of them briefly.

Push:

The push operation is used to add an element to an array from the end (last element)

a.push(8);
console.log(a);

In the example above, an element 8 will be added to the rear end of the array a, so we'll have

["name", 12, true, 8]

Pop:

This is the opposite of push. It removes an element from the end of an array (the last element in an array). So, let's remove the number we just added to the array above.

a.pop(8);
console.log(a);

Unshift:

This method adds an element to the beginning of an array. Lets add two elements to the beginning of our array a

a.unshift("age",36);
console.log(a);

We would have our a array to be

["age", 36, "name", 12, true]

Shift:

The shift method is used to remove the first element in an array and returns the removed element. Let's remove the element age from our array

a.shift("age");
console.log(a);

Our current array

[36, "name",12, true]

So, now that we've covered the basics, let's look at the splice and slice methods. Before we do, feel free to have a little mental stretch.

stretch.gif

Let's continue😁

Slice

The slice method is used to return a number of copied elements from an array. slice() does not alter the array it is used on, rather it simply returns the copied elements while leaving the parent array untouched.

Syntax

array.slice(from, until)

from - where the slice will start

until - where the slice will end ( the element at this position not included)

So the trick is, if we want to slice the first 2 elements from an array, our until parameter will be 2.

Let's remove the first 2 elements from our previous array [36, "name",12, true].

We have to specify the start 0 and the end 2.

let newArray = a.slice(0,2)

a[0] - 36

a[1] - "name"

a[2] - 12 (not inclusive)

So, our newArray will be

[36,"name"]

our previous array will remain unchanged

[36, "name",12, true]

Splice

Splice is used to remove elements from an array and return the removed elements. Splice directly alters the array upon which it is called.

Syntax

array.splice(startindex, numberOfElementsToBeRemoved)

Let's remove 2 elements from our array a starting from the second array (index 1) and store it in the variable splicedArray

let splicedArray = a.splice(1,2);
console.log(splicedArray);

This will return ["name", 12]

While array a will become [36, true]

If we don't specify the second parameter (numberOfElementsToBeRemoved), every element starting from the given index will be removed from the array

Conclusion

Splice and slice can be a bit confusing, and its okay if you still need to reference an article all the time in order to recall how they work. That's why I wrote about it, for your (and my) reference.

That's all for now.

dropd.gif If you enjoyed this article, leave me a cute emoji and follow me on twitter .

Edidiong Asikpo's photo

Okay, girl. You definitely killed it on this one😍.

This is very well explained. Thanks for sharing Emmanuela Azubuike.

NELSON MICHAEL's photo

Asides the fact that you did justice to this topic, the gifs really got me 😂😂😂