KevLinDev Blog

Here’s an interesting page for testing the speed of various operations in JavaScript:

    http://www.jorendorff.com/articles/javascript/speed-test.html

Peter Michaux recently informed me that Yahoo!’s latest release of their UI library, YUI 0.11, now includes a variant of the extend method discussed on this site. Peter writes:

“Yahoo! just announced YUI 0.11 (their JavaScript library) and after I applied a little pressure they decided to use a variation of your extend function as one of their three most fundamental methods in the library.”

Peter has a nice post comparing code written with “extend” in JS versus ports written in Java and Ruby. A comment at the bottom of that page announces the latest YUI release and includes some useful links related to the project.

Thanks for the heads-up Peter!

I had a discussion recently on ways of finding the intersection of two lists of strings in JavaScript. That reminded me of a technique I’ve used many times in Perl for various set operations. It translates well to JavaScript, so I thought it might be worth sharing with others.

The idea is simple: for each set, add a unique tag to a hash for each item in that set. Then, walk the key/value pairs of the hash and perform a comparison on each value. The comparison determines the set operation you wish to perform.

We start with this first function that iterates over all elements in an “items” array (we’re assuming these values are strings for this sample). Each element value serves as a property name in the “tags” object. We simply append the value of “tag” to that property’s value.

function setTag(tags, items, tag) {
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (tags.hasOwnProperty(item)) {
            tags[item] += tag;
        } else {
            tags[item] = tag;
        }
    }
}

The next function is useful for many things; however, for this example, we use it to return all property names of an object whose values meet some specified criteria. We pass in a function to test each property value to determine if we want that property name in our result or not. This allows us to define all of our set operations very concisely and flexibly.

function filter(tags, matchFunction) {
    var result = [];

    for (var p in tags) {
        if (matchFunction(tags[p])) {
            result.push(p);
        }
    }

    return result;
}

That’s all we need to perform our set operations. So, let’s see what the intersection operation looks like.

function intersect(setA, setB) {
    var tags = {};

    setTag(tags, setA, “A”);
    setTag(tags, setB, “B”);

    return filter(
        tags,
        function(value) {
            return value == “AB”
        }
    );
}

We create an empty object to hold our tags for each set. We tag all items from set A with the letter “A” and likewise we tag set B items with the letter “B”. Finally, we return all property names from “tags” whose values equal “AB”. Only names that appear in both “A” and “B” will match this criteria which gives us an intersection.

A slightly more expanded set of operations (along with the code above) can be seen at http://www.kevlindev.com/utilities/sets/sets.svg. That file also includes some operations on 3 sets which may give insight into how this approach can be expanded beyond 2 sets.

It’s surprising how useful these rather simple functions can be. It all comes down to how you define the matchFunction used in the “filter” function.