PHP-style $GLOBALS in Javascript?
Javascript has implied globals. When you skip the var in var a = 1; and go a = 1;, then a becomes a global variable. Some consider this an error in the language. Global variables should be avoided because they tend to overwrite each other in unexpected places, especially if the project grows in LOC and number of developers.
In PHP on the other hand, variables are local. If you need a global variable, then you have to have to be explicit about it using the $GLOBALS superglobal array.
So how about this: adopt the $GLOBALS convention in your JavaScripts? At the top of the script you go:
$GLOBALS = {};
Then every time you need a global variable, you do:
$GLOBALS['myglob'] = 1; // very PHP-like
or if you prefer:
$GLOBALS.myglob = 1;
Benefits of the approach:
- global variables easy to spot (even from an aeroplane)
- if it's not $GLOBAL, it's meant to be local. If it's missing the
var, it's an error
Drawback:
- It's a convention, so it can only help, but not enforce any coding practices
How many globals
Here's a quick test to check how many globals you have in a page.
(function(){ var globs = 0; for (var i in window){ globs++; } alert(globs); })()
Run this script in your page without the scripts. Then add the scripts to the page run again. The result should be only one more global var if you followed the $GLOBALS convention.
March 10th, 2008 at 10:17 am
Its actually a nice idea, I quite like it.
What I really do like though, is that the stuff you want to be global, isn’t mixed in with all the clutter that the browser (especially IE) wants to be global. e.g. if you run your globs code on a blank window in IE, you’ll get a bunch of objects and properties before adding a single variable.
March 10th, 2008 at 12:33 pm
Thanks Steve! Worst of all,
<input id="tmp" />declares a global vartmpMarch 12th, 2008 at 6:56 am
Stoyan Stefanov’s Blog: PHP-style $GLOBALS in Javascript?…
In a new post to his blog today, Stoyan Stefanov has ……
March 12th, 2008 at 7:00 am
[...] In a new post to his blog today, Stoyan Stefanov has a proposal to being something PHP users are very used to - superglobals - over to Javascript. Javascript has implied globals. When you skip the var in var a = 1; and go a = 1;, then a becomes a global variable. Some consider this an error in the language. […] In PHP on the other hand, variables are local. […] So how about this: adopt the $GLOBALS convention in your JavaScripts? [...]
March 12th, 2008 at 9:40 am
They aren’t really globals in JavaScript. The scope actually comes from the parent. Undefined variables appear to be global, that’s true.
Scoping is really “weird” in JS if you’ve never worked in another language that does closures. See:
http://en.wikipedia.org/wiki/Closure_(computer_science)
Not saying you’re wrong, of course, but thinking about JavaScript scopes the same way you think about PHP scopes is likely to lead to maintenance/development trouble down the road (-:
S
March 13th, 2008 at 1:15 am
[...] In a new post to his blog today, Stoyan Stefanov has a proposal to being something PHP users are very used to - superglobals - over to Javascript. Javascript has implied globals. When you skip the var in var a = 1; and go a = 1;, then a becomes a global variable. Some consider this an error in the language. […] In PHP on the other hand, variables are local. […] So how about this: adopt the $GLOBALS convention in your JavaScripts? [...]
March 13th, 2008 at 1:15 am
[...] In a new post to his blog today, Stoyan Stefanov has a proposal to being something PHP users are very used to - superglobals - over to Javascript. Javascript has implied globals. When you skip the var in var a = 1; and go a = 1;, then a becomes a global variable. Some consider this an error in the language. […] In PHP on the other hand, variables are local. […] So how about this: adopt the $GLOBALS convention in your JavaScripts? [...]
March 13th, 2008 at 4:45 pm
Interesting idea Stoyan!
Just out of curiosity though: why use a dollar sign? Just because it’s more PHP-ish or is there another reason?
Also: In a YUI context you may want to use YAHOO.GLOBALS maybe?
March 17th, 2008 at 7:39 pm
Hi Marco,
I used the dollar sign just for the sake of the PHP analogy, and a little bit as a joke in the spirit of “let’s make JS like our other favorite language” (looking at you, prototype.js).
Using a namespace and a GLOBALS property is definitely a good way to do the same.