facebook-squared twitter-squared rss-squared gplus-squared



September 2017



JavaScript Array slice and splice

Written by on 21 September 2017

If you have used JavaScript arrays than you surely know it’s length property. Arrays also come with built in methods. In this article I will talk about slice and splice. What they are and where they can be used. They manipulate our arrays. Sometime mutating the original array sometimes not.

While writing JavaScript you will come across arrays and objects in order to deal with data. Even if you manipulate the dom, you will find arrays. So it’s better to master those manipulation functions.

Both the slice() and splice() return a subset or a portion of the array.

What is Slice()

The slice() function accepts two arguments startIndex and endIndex. For instance we have an array var num = [1,2,3,4,5,6,7] and we need the first three element of the array. So that how you would do it

var num = [1,2,3,4,5,6,7];
var slicedArray = num.slice(0,2);
> slicedArray // [1,2,3]

// Let's print the original array
> num // [1,2,3,4,5,6,7]

Now we have the slicedArray which is a subset of the num array. If you provide any more arguments other than the startIndex and endIntex, slice() function will just ignore them.

Slice() is an immutable function. It means that It will not affect the original array. Looking at the Line No 6 of the above snippet the num array is not affected at all.

But what function will mutate the orignal array?

That is Array.splice()

The splice function works differently than slice. It accepts startIndex and length. The length means the number of array elements to pluck. Let’s make it simpler using a code snippet

var marks = [5,10,15,20,25,30];
var sliced = marks.splice(1,3);
> sliced      // [10,15,20]

> marks       // [5,25,30]

Looking at line 3, we get the items that are removed from the marks array. Line 5 confirms that the splice() modifies the original array.

Their Usage

I use splice() most of the time, especially to romove elements from the dom. For me it’s easier to remember it’s syntax. You just need to provide the index. For example countries.slice(1,1) will remove an element at the second index of countries array.

The slice() can also be used to clone an array. Because array are passed by reference. I think I can give an example to expalin this.

var old_array = [1,2,3,4,5];
> old_array      // [1,2,3,4,5];

var new_array = old_array;

> old_array      // [1,2,3,4,5,6];

Although we have pushed new element to the new_array but yet the element is also added to the old_array. On the fourth line we are just passing a reference to the old_array not the whole new array. In order to cope with this; we have to go through another code snippet

var new_array = old_array.slice();

> old_array      // [1,2,3,4,5]

As you can see the new_array is now a whole new array. It’s no more a reference to the old_array.

That’s it for this time around. See you around for more awesome stuff.

Leave a Reply

%d bloggers like this: