I'm sure I'm not alone when I say that one of the best ways to improve our
coding skills is by reading code written by someone else. Sometimes we
don't realize how lucky we are to have so much source code at our
fingertips, namely Open Source Software.
The guided tours
With this post I'll start another unbound series where I highlight
some interesting piece of code that I studied. I'll share
my notes and do my best to explain what I learned from it.
jQuery: Eating the elephant one bite at a time
I wouldn't dare to start things off with a complete overview of jQuery. It's
a massive chunk of JavaScript and I'm afraid there isn't an easy entry point
in the source code.
I chose to find parts of it that are relatively easy to explain separately
from the rest and that contain something worth explaining. I'll do at least a
few of those from jQuery but my plan is to not keep this series tied to
jQuery or even JavaScript.
The code under the microscope
We're going to take a look at jQuery.fn.text(),
which returns the textual content of all the elements in the jQuery wrapped set,
combined in a single string.
Here's the code from jQuery version 1.3.2.
text: function( text ) {
if ( typeof text !== "object" && text != null )
return this.empty().append(
(this[0] && this[0].ownerDocument || document).createTextNode( text )
);
var ret = "";
jQuery.each( text || this, function(){
jQuery.each( this.childNodes, function(){
if ( this.nodeType != 8 )
ret += this.nodeType != 1 ?
this.nodeValue :
jQuery.fn.text( [ this ] );
});
});
return ret;
},
The text() function can be called with or without arguments, so
initially it tries to detect if a string argument was passed to it, in which
case it will be made the content of the elements in the jQuery object.
Be aware that in all methods defined inside jQuery.fn the
value of this will be the current jQuery object.
The first thing that caught my attention was the following expression:
(this[0] && this[0].ownerDocument || document)
In the context of the code it's expected to return a DOM document object, but it's
a boolean expression, isn't it? What gives?
Well, yes, it is a boolean expression. That leads me to explain a subtle but powerful
difference between boolean operators in JavaScript to many other languages you may
be more used to.
Guard and Default operators
The way I like to describe the boolean operators && and ||
is: They return the operand that short-circuited and resolved the expression. To
put in a different way, when the JS interpreter detects that one of the operands has a
value that makes the remainder of the comparison irrelevant, it stops right there and
that operand (not necessarily true or false) becomes the
result of the boolean expression.
Truthy and Falsy:
In the context of a boolean expression, any value in JavaScript has a boolean meaning.
It's actually easy to memorize which mean which. The values that are treated as false
are: false, null, undefined, 0,
"" (empty string), and NaN. We call them falsy.
Everything else is treated as true and we call them truthy.
Here are some examples:
| A | B | A && B |
|---|
false | 123 | false |
null | 123 | null |
0 | 123 | 0 |
undefined | 123 | undefined |
undefined | null | undefined |
123 | null | null |
123 | 456 | 456 |
123 | "text" | "text" |
"text" | true | true |
|
| A | B | A || B |
|---|
false | 123 | 123 |
null | 123 | 123 |
0 | 123 | 123 |
undefined | 123 | 123 |
undefined | null | null |
123 | null | 123 |
123 | 456 | 123 |
123 | "text" | 123 |
"text" | true | "text" |
|
Because of the above behavior, these boolean operators are often used as Guard or Default
operators. The guard operation is commonly used when you want to avoid a null or undefined reference error:
//someObj can be null. text will also be null in that case.
var text = someObj && someObj.toString();
Which is a shorthand for:
var text = null;
if (someObj !== null) {
text = someObj.toString();
}
The default operation is arguably a much more common occurrence. We see it a lot when
functions support optional arguments with default values. When a value is not given for
a function parameter, it becomes undefined. We can detect that and give a
default value like this:
function addAll(numbersArray, step) {
step = step || 1;
var sum = 0;
for (var i = 0; i < numbersArray.length; i += step) {
sum += numbersArray[i];
}
return sum;
}
addAll([1, 2, 3, 4, 5, 6]); // ==> 21
addAll([1, 2, 3, 4, 5, 6], 3); // ==> 5
In the above example, the step parameter is optional. Not providing it
would cause a problem if we hadn't defaulted it to one right at the beginning of
the function.
Wow. We sure covered a lot of stuff just to explain a simple boolean expression.
The good news is that we will see a lot of that in the jQuery code (or in pretty
much any decent JS code base) so it's good to understand it well.
Back to our original expression.
(this[0] && this[0].ownerDocument || document)
Armed with our new understanding we can finally read this expression as:
If this.ownerDocument exists I want that, otherwise just give me the
global document object. This returned DOM document object will
be the owner document of new text value being inserted.
What about the rest of that function
It's funny that a tiny bit of that function became this long post. But
the remainder of the function, in its majority, isn't really all that interesting
in terms of JavaScript. It's mostly boring DOM navigation, done recursively.
If you know how to use the
jQuery.each()
utility function, you can figure out that code on your own.
Our time here is up and we have a whole lot more of
code sightseeing to do.
