Ashita.org

Here’s something pretty easy to use, useful, and strangely not as common as you would expect.

JavaScript has an operator known as the “default” operator and is the same as the logical-or operator. That’s right. ||.

First, some examples of how we can use it:

var value_1 = false || 2;
var value_2 = null || 2;
var value_3 = 0 || 2;

In all three of the above cases, the left side of the default operator is falsey and thus value_1, value_2, and value_3 are all equal to 2. Just to make it clear, falsey values are values which can be converted to boolean false. ‘false’ itself is a given, null is considered false, so are empty strings and finally and so is 0. Negative numbers are not false and nor are objects, empty or otherwise. Thus:

Below is a slightly more useful example. I’ve used jQuery’s $.get here to simplify the example and the display_items method is left to the imagination of the reader.

var DEFAULT_ITEM_LIMIT = 20; //In the case of a firefox extension, this would be better written as: const DEFAULT_ITEM_LIMIT = 20;

function get_random_items(how_many)
{
     how_many = how_many || DEFAULT_ITEM_LIMIT;
     $.get("random_items.php", {limit:how_many}, display_items);
}

In the above example, we see a reasonable default being set in advance and if the get_random_items method is called without passing parameters, or provided null, false, 0 or an empty string as the value of how_many, then the default item limit will be used instead.

It works pretty simply. If the statement on the left side is falsey, then the value on the right side is used instead — exactly like the logical-or. See this MDC page on logical operators for more examples.

Now you can do some fancy things with this. For example, you could do something like this:

var user_name;
if ((user_name = (prompt("What is your name?") || "Jon")) === "Jon")
{
    //do stuff
}

But please, please don’t. That line was painful to write, and unnecessarily difficult to read. Something like:

var user_name = prompt("What is your name?");
if (!user_name)
{
    //no name provided, use default
    user_name = "Jon";
}

… would be much better. Just remember, like most coding tricks, only use the default operator when it makes things more readable.

One of the most common, and useful examples of this technique comes with event handlers.

function box_click_handler(event)
{
    event = event || window.event;
    var target = event.target || event.srcElement;
    //do other stuff
}

Basically, by using the default operator we were able to quickly and easily get the event object and the target (or source) of the event in both cases: browsers that have strong DOM spec support, and browsers that don’t, i.e. IE.

As a closing note, just like the logical-or in a conditional, this too can be chained. The leftmost truthy value will be used.

function find_user(name)
{
    name = name || false || get_default_name();
    $.post("find_user.php", {name:name}, display_user);
}

Of course the above is needlessly long (the false is just thrown in for demonstration purposes), but I think you get the idea. Hope ya’ll find it useful.