JavaScript logical operators

JavaScript has three logical operators: &&, || and !. We’ve already seen two posts on the ! and today we’ll wrap our discussion on logical operators by talking about the && and the || operators. Traditionally, you’ll hear something like this when these operators are presented:

The && operator returns true when all the conditions are true and the || operator will return true when at least one of the conditions is true.

hum…unfortunately, this is not really true in JavaScript. Ok, let me make this clearer: the previous definition is only true when both conditions are “true booleans”. I’ve already talked a little bit about the || operator in the past, so today we’ll concentrate most of our time in the && operator. Here’s a quick example which should make things quite clear:

var student = { name: ''luis'' };
var result = student && true;

Yes, it’s another of my famous WTF snippets :,,)  we’re creating a student variable which holds a literal object. We then use the logical && on a complex expression and save that expression in a variable called result. What do you think the alert will show?

If you’re thinking “true”, then you’re correct. I can hear you thinking: “hey, but true is a boolean value and this guy has just said that the traditional definition of the && operator presented in one of the previous paragraphs isn’t right. has he been drinking or what?”. OK, let’s try a small change:

var result = true && student;

And now, what do you see in the alert message? If everything went ok, then you probably see the “[object Object]” string (which resulted from the “indirect” invocation of the toString method over the result variable). Now, that really proves that && didn’t really returned a boolean. What’s going on here???

It’s really simple: when you use the && operator to “join” two conditions (expression 1 && expressions 2), the result of that expression will be expression 1 if that expression can be converted to false; if that doesn’t happen, then expression 2 is returned from that evaluation. Operator || has a similar behavior: if expression 1 can be converted into true, it returns that expression; otherwise, it returns the other expression.

If you’ve done some JS in the past, have moved on to other areas and have just returned to it now, you might be a little confused. And that’s ok because things didn’t always worked out like this in the past. If I’m not mistaken, in JS 1.1 the evaluation of an expression which used the && operator or the || operator resulted in a *boolean* value.  The evaluation used at that time was similar to the one described in the previous paragraph. The main difference was that a boolean was returned (instead of the expression that was converted into a boolean).

Before ending, there’s still time to talk about short-circuit evaluation. Since expressions are evaluated from left to right, false && something is always false. On the other hand, true || something is always true. And that’s it for today.  Stay tuned for more.


~ by Luis Abreu on September 16, 2009.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: