I’m John K. Paul
a software engineer
and a speaker

found on

contact at

john@johnkpaul.com

about me

Often a front end software engineer, with many more interests than that

recent public projects

Status updating…

watch at

Chrome Debugger and Firebug Surprises

- - | Comments

The Chrome JavaScript debugger and Firebug are optimized beasts, but sometimes I get bit by one feature that I’m not expecting. It happens rarely enough that it always takes me a few seconds of WTF thinking before I remember. While debugging, if you try to use a variable from a closure scope in the console, that wasn’t actually used in the source, you’ll be surprised by ReferenceErrors like in:

This is because JavaScript debuggers optimize the hell out of your code and will remove variables from the Lexical Environment of a function if they are unused. See my previous post about hoisting for more information about the Lexical Environment. If you use these variables anywhere in your source, suddently they will be accessible again inside of the scope of the new function.

You don’t even have to actually cause any side effects in order to make sure they’re not removed. Just including the identifier in the source of the function will keep their values around.

Hopefully this will prevent some rare moments of JavaScript inadequacy that might strike when debugging. Don’t worry, it’s not you, it’s the debugger.

What Is Hoisting, Really?

- - | Comments

I use the word “hoisting” in relation to JavaScript pretty often. I’ve even written a blog post about how it’s one of the difficult parts of JavaScript to learn. In reality, hoisting isn’t part of JavaScript at all. There is no feature in the specification called hoisting, so I’ve decided to figure out what it really is.

You can find a lot of good information about hoisting over at Nettuts and Ben Cherry’s blog. In case you haven’t come across it before, hoisting is how JavaScript developers describe the existence of certain references before they seem to be declared. For example:

Handling fbAsyncInit? - Use $.Deferred()

- - | Comments

I’m excited to have come across a straightforward example of a practical usage of $.Deferred that has nothing to do with ajax calls.

I’ve seen an assortment of hacks to handle the complexity needed handle what code needs to be run after the Facebook JS SDK has been loaded onto a web page.

There are long lists of callbacks.

There are global booleans.