Building Better Objects

Building Better Objects

One of the things which is most remarkable about the jQuery source, if you ever sit down to read it, is the efficiency. This code has been stripped down pretty much as far as it can be, making it leaner and meaner than most other frameworks out there. The technique I am going to show you here is a perfect example of that, as well as being a very good coding practice that all developers should be using. On line 287 of the jQuery 2.0 source, we have the following code:

target = arguments[0] || {},

So, what this says is: You have a variable named ‘target’, and into it we want to store some stuff. Because that’s what variables are for. Like your Dad’s garage, they are for storing stuff that you will (hopefully) use later. Into target, we want to store the first member of the arguments array. How do we know arguments is an array? Well, we don’t really. And even if arguments was an array, we don’t have a guarantee that we will have something useful stored in arguments[0].

So, the jQuery team has used a cool shortcut here to make sure that our ‘target’ variable is always going to be an object. Reading this out in plain English would be: In the variable target, store EITHER the contents of arguments[0] OR an empty object.

Empty object? I just see curly braces! And you are completely correct. In JavaScript, this is the most efficient method of creating a new Object. Benchmarking tests have conclusively and unequivocally demonstrated that doing variable = new Object; is slower than doing variable = {}.

This method guarantees that our ‘target’ variable is always going to be an object (well, technically a reference to an object, but that’s not important right now). Additionally, by reading through this one line of code, we have a pretty good assumption going here that arguments[0] is going to contain an object. Why can we assume that? Well, the developers have taken pains to guarantee that in the future, ‘target’ is going to behave as an object, by specifying an empty object as the default. So, later on when we see target referenced, we know we’re working with an object.

This is an excellent way to make sure that variables have at least some sane default structure, if not necessarily a default value. It will prevent errors in your code if your variable types are predictable. Similarly, you can make default arrays or default strings. Here are some examples:

const default_array = somevar[1] || [];
const default_string = argument || "default";

Because of how jQuery evaluates logical conditions like this, the statement before the or(||) is always tested for truthiness first. (For a good article on truthiness in Javascript, go here) If it’s valid, then it is assigned and the statement after the OR isn’t even looked at. The only time the second statement will get evaluated is if (and only if) the first statement fails. This is because JavaScript is willing to give each argument an equal opportunity to evaluate as true. Isn’t that nice? True equality for all.