When I first started working at IWS, there were two teams, the front-end or "Interface" team and the back-end or "Systems" team. I was part of the Interface team writing JavaScript; the Systems team wrote Python. We have now gone to a new approach in development, the two teams merging into a single "Engineering" team. Though most of us have written at least some code in both languages, we've been knee-deep in cross-training.
As part of our cross-training, the new Engineering team has been further divided into "squadrons" of three with team members consisting of both (previous) Python and JavaScript developers working together on small projects. My team includes two Python developers who know relatively little about JavaScript, so the responsibility of catching them up to speed has fallen on my shoulders.
In working with my two teammates, I mentioned the concept of "hoisting" where variables are lifted to the top of function blocks by the interpreter. I also shared with them the PyCon video PyCon 2011: Javascript For People Who Know Python which offers a decent overview of JavaScript for the Python-minded.
The PyCon video suggested two things I want to mention: first, it suggested that JavaScript's behavior has an undeserved reputation for being unpredictable, and second, in the Q&A there was a question asked about an interactive shell for JavaScript. I'll come back to the former in a moment; regarding the latter, the video didn't mention it, but did you know Firebug provides its own interactive shell?
To use Firebug's "command editor" (as it is called), click the arrow next to the Console tab, then select Command Editor from the context menu:
Okay, so now that we have an interaction shell, a large step toward understanding the "unpredictable" nature of JavaScript is to understand fully how hoisting works. I've been writing JavaScript for years now, and I'll have to say that if I was given an exam with the two examples listed at the beginning of JavaScript Scoping and Hoisting, I would have failed miserably.
The reason I would have failed is because JavaScript is normally backward to Python or PHP. Defining a private (definition scoped) variable in Python involves nothing more than declaring it in an assignment. If you want it to be global, you have to explicitly use the global keyword, exactly as you do in PHP (except in PHP, a semi-colon is mandatory).
But in JavaScript, if you want a private variable scoped to the function, you have to use the var keyword. If you omit the var keyword, the variable becomes available globally—define a variable without the var keyword anywhere in a script, and it's instantly global. (That said, if you declare a variable using the var keyword outside any functions or classes, it is also global—we might say that it is "private to the global scope" because though it was declared with the var keyword, it was nevertheless defined globally, outside a containing function or class.)
With this var / no var knowledge in place, that's why I would have failed an exam with the two examples from the article above: I did not understand exactly how hoisting worked, and this articles does an excellent job of taking another level of unpredictability out of JavaScript's run-time behavior.
So, check out JavaScript Scoping and Hoisting and put the claims to the test: fire up Firebug's command editor or try out JSFiddle and verify for yourself that the results accord with the claims made, then read the rest of the article to see why the results are counter-intuitive, and, ultimately, highly predictable once you understand what's going on under the hood.
Very helpful post. Here's another good one on hoisting:
ReplyDeletehttp://www.programmerinterview.com/index.php/javascript/javascript-hoisting/