jList 1.6.0: Eight new functions added

Earlier today I pushed jList 1.6.0 to GitHub. This version of the library, which brings ColdFusion-style list handling to Javascript, adds eight new functions, bringing the total to thirty:

  • listConcatenate
    Adds one list to the end of another.
  • listDifference
    Returns the elements that are unique to each of two different lists.
  • listIntersection
    Gets the elements that are common to each of two different lists.
  • listRemove
    Removes elements in one list from another list.
    Matching is case-sensitive.
  • listRemoveNoCase
    Removes elements in one list from another list.
    Matching is not case-sensitive.
  • listReplace
    Replaces any occurrences of an element in a list with a different element.
    Matching is case-sensitive.
  • listReplaceNoCase
    Replaces any occurrences of an element in a list with a different element.
    Matching is not case-sensitive.
  • listUnion
    Combines the elements from two different lists.

For the first time, these changes were not made by me but by Chris Tsongas. This was the first time Chris had contributed to an open source project and he did a great job of adding new functionality as well as making sure all of the tests and documentation were brought up-to-date.

All documentation is updated so full details of the new functionality is on the jList GitHub page.

All eight new functions have also been added to jsFiddle should you wish to try them out first –

listConcatenate

listDifference

listIntersection

listRemove

listRemoveNoCase

listReplace

listReplaceNoCase

listUnion

jList 1.6.o can be downloaded for free from GitHub.

More:

Previously:

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: