Restating the obvious: The fastest way to truncate an array in Javascript

Recently, while making some minor updates to jList I needed to truncate an array in Javascript by which I mean remove a number of elements from the end of the array, without the need to keep the discarded elements. It’s not something that I’ve had to do often so it’s not something I’ve really given much thought to. My first instinct was to simply set the length property of the array to equal the desired number of elements but first I decided to spend some time investigating alternative methods.

A quick Google search revealed that there are three (apparently) equally popular methods of doing this – array.splice(), array.slice() and array.length. As each of these methods can give the same result, are trivial to use and easy to understand, performance can be the sole criteria when selecting which one to use.

Assuming we have an array that is four elements long that we want to truncate to two elements:

var array_start = ['cat','mouse','dog','chicken'];

 

Method 1: array.slice

Our first method, array.slice, will extract the required elements (the first two) into a new array and leave the original array untouched but by overwriting the original array we have the same end result as if we had truncated it in place:

array_start = array_start.slice(0,2);

 

Method 2: array.splice

Our second method, array splice, will remove all but the first two elements from the array and return them (the removed elements) as a new array. The original array will no longer contain the first two elements, which is exactly what we want:

var array_removed = array_start.splice(2);

 

Method 3: array.length

The third and final method involves simply setting the length property of the original array. This will remove all elements above that position.

array_start.length(2);

 

 

Though they each take a different approach, they all give the same end result – an array containing only two elements, ‘cat’ and ‘mouse’.
You can see these working and experiment with them in this jsFiddle.

As each approach gives the same result, which is the most efficient?
A simple jsPerf quickly reveals that, as suspected, setting the length property is easily and consistently, the fastest on all browsers followed some distance behind by splice and with slice trailing in last place. In fact, the speed improvement of length over the alternatives is so dramatic it would be very difficult to justify using anything else when truncating an array.

Truncating an array using  array.length is significantly faster than the alternatives in Google Chrome
Truncating an array using array.length is significantly faster than the alternatives in Google Chrome
The same results are seen across all other major browsers.
The same results are seen across all other major browsers.

A final caveat with regards to Array.length

Although I stated earlier that all three of these methods “give the same end result”, that is not strictly true. One thing to look out for is if you try to “truncate” an array at a length longer than it’s current length. If we were, for example, to try and truncate our four element array at six elements then both Array.slice and Array.splice would return the same result – an unchanged array. However, Array.length would actually increase the number of elements by 2 and return an array with two empty elements appended to it, which is very likely not what is required. This can be seen in the jsFiddle.

More:

5 thoughts on “Restating the obvious: The fastest way to truncate an array in Javascript

  1. Thanks for your comment but I think you misunderstood what I was trying to achieve in this post. My intention was to determine the fastest way to truncate an array, not to empty it. By “truncate” I mean “remove elements from the end”.

    For example, if an array has 200 elements (0-199) I might want to truncate it to be 100 elements long, that is remove all elements from 100 to 199 inclusive. This is a slightly different problem from emptying an array and not one that Array.shift is suitable for.

    Having said that, I was surprised to see how fast Array.shift actually is; that’s an interesting jsPerf and I’ll update my post to point to it in case anyone else ends up here while looking to find the fastest way to empty an array.

    1. I realize this was years ago, but Array.shift() is emphatically not a faster way to clear an array; the benchmark was just incorrect. Specifically, the setup code which creates the array is only run once per test case (outside the iteration loop), so the shift() benchmark ran with a zero-length array each iteration after the first. Needless to say this made it look pretty fast.

      I modified the benchmark to clone the array before each test iteration (doing so in all of the test cases even though it is only needed for correctness in the shift() case for fairness). This makes it obvious that clearing an array with shift() is O(n^2) as one would expect.

      http://jsperf.com/array-clearing-performance/14

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s