More fun with ‘==’ and ‘===’

JavaScript does type coercion when doing comparisons

'0' == 0 evaluates to true

because the string gets coerced to a number.

Remembering our issues with ‘truthy’ and ‘falsy’ we may sometimes wish to use === which evaluates the expression based on both the value and the type of the two sides:

'0' === 0 evaluates to false

(because the items are different types)

Using our friend the unary operator can force the string into a number type before the comparison is made. So:

+'0' === 0 evaluates to true

Other fun expressions:

-1 == '-1' evaluates to true
-1 === '-1' evaluates to false
-1 === +'-1' evaluates to true
-1 === -'-1' evaluates to false
-1 === -'1'  evaluates to true

What the Heck is the ‘+’ for?

I came across the following that someone had added to some code I was working on:

incidentId = +idValue;

I initially thought this was something to do with jQuery (because of the single initial punctuation). Remember, this blog’s goal is to document my experiences in learning how to do stuff in JavaScript, not to make me look smart.

It turns out that it’s the same old unary operator we’re used to seeing in more ‘normal’ (less flexible) languages. What this tells the runtime is to treat the value in idValue as a number. Often, we are passing around strings which contain numbers and JavaScript is good at converting stuff for us. If we were to pass idValue in the above code as a string “1”, then the following

idValue + 2

might be calculated as “12” depending on the context, whereas:

+idValue + 2

would always be the number 3.

Truth and Equality in JavaScript

This is a subject much covered in JavaScript programming annals. Here is a beginner’s link for those following in Fraffic’s taillights.

http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/

This is from Douglas Crockford’s JavaScript: The Good Parts:

For those who’ve never seen an ‘if’ statement in railroad diagram form

The if statement changes the flow of the program based on the value of the expression. The then block is executed if the expression is truthy; otherwise, the optional else branch is taken.

Here are the falsy values:

  • false
  • null
  • undefined
  • The empty string ”
  • The number 0
  • The number NaN

All other values are truthy, including true, the string ‘false’, and all objects.

 

Inspector Gadget’s cousin SelectorGadget

Speaking of Bookmarklets, I came across this very cool one the other day: SelectorGadget. SelectorGadget is an open source bookmarklet that provide CSS selector information about DOM objects on a web page.

It can be found here:

http://www.selectorgadget.com/

The selector info it provides can be used in jQuery. This makes getting the right syntax for querying the DOM a snap.

Check out the author’s screencast on the front page.

Bookmarklets, oh my!

Well, I encountered bookmarklets last week. These are JavaScript snippets which can be executed from the Bookmarks menu in a web browser. The snippets operate on the current page and can be used to scrape data or manipulate info gotten from the page.

Bookmarklets are created using the URI scheme with the protocol type ‘javascript:’ (instead of http: or ftp:, for example).

A common way to use the bookmarklet is to provide it in the form of an href element which you then drag to the bookmarks menu in the web browser.

<a href="javascript:(function(){alert('Fraffic says hello!');})();">drag this to the add bookmark icon on your browser</a>

Unfortunately, Word Press doesn’t seem to play well with inline JavaScript, so I can’t provide you will a live demo.

Short-circuiting and Booleans

I am familiar with short-circuiting from other programming languages, where the second half of a boolean expression might not be evaluated if the first half evaluates to an expression sufficient to arrive at an overall value. Meaning, if the first half of an OR operation is TRUE (or the first half of an AND operation is FALSE), the second half is not evaluated.
Because statements also are expressions in Javascript, you can do something like this:

tokens.length && (aToken = tokens.shift());

What happens here is that the first half of the evaluates to a non-zero value, the right half of the operation is evaluated, which causes the first item to be pushed off the tokens array and shoved into the aToken variable. If the tokens.length is 0, no further evaluation is necessary.

Also, if the && expression above evaluates to TRUE, the value of the ext ire boolean expression is value of the last value in the list.

Today’s Weirdness: OR’s

I can understand using the logical test on an object to see if it is null.

if (str) {
// str contains a value
}

or

if (!str) {
// str is NULL -- or 'undefined'
}

But this is weird:

var d = a || b || c;

d will pick up the first non-NULL value of a, b, or c. If all three are undefined, so will be d.

I’m sure I will stumble across more info about the best use of this idea, but to someone used to dealing with binary results from Boolean compares, it is both intriguing and scary.