Blog image: 

The last couple weeks I've spent learning a client-side Javascript application framework, sproutcore. In the process, I took the opportunity to take a refresher on my javascript skills.

A decade and a half after the emergence of Javascript, there is still a tremendous amount of confusion, even among developers, between Javascript (an awesome scripting language that is built into web browsers) and the DOM (the horrendous API that the browsers expose to Javascript). Compounding the problem is that you don't really need to understand javascript to write programs that sort of work most of the time. It kind of looks like C, and you can hack through it as if it were any other C style language. This has led to Javascript becoming the most widely misunderstood language. However, for your own sanity and the ultimate success of your webapps, it's a good idea to buckle down and actually learn it well.

The problem is, it's hard to learn Javascript. Or, more precisely, it's hard to know that you are actually learning javascript. The first google result for "Javascript tutorial" is the W3 Schools tutorial, which is a collection of nearly every mistake you could possibly make writing in javascript, presented as examples of what you *should* do. Not good.

The level of sheer incompetence that the W3 Javascript tutorial deserves ink. The first SIX pages of the tutorial focus on two browser methods, document.write and alert, that you should almost never use. The browser, from the view of the web page, is a single threaded platform, and in an asynchronous AJAX world, alert is the worst thing you can do because it blocks the process, and blocks communication with the server for any pending AJAX requests. Document.write shouldn't even exist because it makes everyone's programs slower, even if you don't use it, and you can do the same thing as document.write much more sanely other ways.

Page 7 is so epically awful that I'm going to quote it :-)

If you assign values to variables that have not yet been declared,
the variables will automatically be declared.

These statements:
x=5;
carname="Volvo";
have the same effect as:
var x=5;
var carname="Volvo";

Wrong. Wrong wrong wrong. Never mind that in this one isolated case (assuming we're in global scope in this snippet) it's sort of correct. Not declaring a variable is not the same as declaring a variable. Not declaring a variable automatically puts it INTO THE GLOBAL SCOPE. You do NOT want this. This is an excellent way to introduce impossible to track down bugs into your application.

For instance:

function helper() {

  console.log('Counting to ten...');

  for (i = 1; i <= 10; i++) {
    console.log(i);
  }

}

function countToTenTenTimes() {
  for (i = 1; i <= 10; i++) {
    helper();
  }
}

countToTenTenTimes();

This code does not print counting to ten ten times. It prints it exactly once, because i is not declared within any function scope, and is assumed to be global. The iteration variables in the two loops clobber each other. This gets worse as soon as there is more than one script on the page. Think about how often i is used as a placeholder for iteration. If two scripts make the same mistake of not declaring i, the page breaks and no one knows why. There is no compile time warning and no run time warning for this error.

This is my favorite non-example from the tutorial, a few pages later:

All the following lines of code create Boolean
objects with an initial value of false:
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

All righty. Simple enough. Then why does this happen?


var myBoolean = new Boolean(false);

if (myBoolean) {
  console.log('WTF');	
} // Outputs 'WTF'. Don't believe me? Try it.

new Boolean(false) creates a new object wrapping a boolean value. But that object is truthy. You really don't want to bring this level of confusion into your programs. Here's the correct way to make set a variable to false:


var myBoolean = false;

This line doesn't occur on the W3 tutorial. How is that possible?

This tutorial, which has been up for years, breeding new generations of confused Javascripters every day.

So how do you actually learn javascript properly?

Douglas Crockford has a few really excellent videos available that might be what you are looking for. He also wrote an excellent book that you should probably read.

Bonus rant on the sproutcore experience coming soon!

Old Greenwich, CT 06870 - (914) 275 5520