JavaScript the Good Parts

http://code.google.com/edu/languages/index.html#_js_goodparts

Douglas Crockford

The world's most misunderstood programming language

A language of many contrasts

The broadest range of programmer skills of any programming language

• from comp scientiests to cut-n-pasters and everyone in between

Complaints

• JavaScript is not a language I know
• The browser programming experience is awful
• It's not fast enough
  • DOM is slow, not JavaScript
• The language is just a pile of mistakes

Influences

• Self
  • prototypal inheritance
  • dynamic objects
• Scheme
  • lambda
  • loose typing
• Java
  • syntax
  • conventions
• Perl
  • regular expressions

Bad parts

• global variables
• • adds and concatenates
• semicolon insertion
• typeof
  • object, null, array all evaluated as "object" which is wrong
• with and eval
• phony arrays
  • in js, essentially implemented hash tables
• == and !=
• false, null, undefined, NaN

Transitivity? What's That?

• '' == '0' // false
• 0 == '' // true
• 0 == '0' // true
• false == 'false' // false
• false == '0' // true
• false == undefined // false
• false == null // false
• null == undefined // true
• " \t\r\n " == 0 // true

-> caused by type coercion

Example: Two errors that cancel each other out.

value = myObject[name];
if (value == null) {
  alert(name + ' not found.');
}

=> use ===, so change to

value = myObject[name];
if (value === undefined) {
  alert(name + ' not found.');
}

Good features that interact badly

• Objects can inherit from other objects
• Functions can be members of objects
• for..in statement mixes inherited functions with the desired data members (common source of errors)

for in is troublesome (0:17)

• Design question: => issue is it shoudn't have been released

Bad Heritage

Blockless statements

if (foo)
  bar();

Expression statements

foo;

Floating point arithmetic

0.1 + 0.2 !== 0.3

++ and --

switch

Good Parts

• Lambda
• Dynamic Objects
• Loose Typing
• Object Literals

Inheritance (0:24)

Two schools

• Classical
• Prototypal

Prototypal Inheritance

• Class free

new (0:25) - don't use new anymore

• Example 0:25:50

Global - showing examples

Closure (0:27:36)

var digit_name = function () {
  var names = [...];
  return function (n) {
    return names[n];
  }
}();

Which leads to module pattern

A Module Pattern (0:28:30)

var singleton = function () {
  var privateVariable;
  function privateFunction(x) {
    ... privateVariable ...
  }

  return {
    firstMethod: function (a, b) {
      ... privateVariable ...
    },
    secondMethod: function (c) {
      ... privateFunction() ...
    }
  };
}();

Power Constructors

1. Make an Object

• Object literal
• new
• Object.create
• call another power contructor

2. Define some variables and functions

• these become private members

3. Augment the object with privileged methods
4. Return the object

Steps - one to four.

function myPowerConstructor(x) {
  var that = otherMaker(x);
  var secret = f(x);	// private
  that.priviledFunc = function () {
    ... secrete x that ...
  };
  return that;
}

Style isn't subjective

return 
{
  ok: false
};

vs

return {
  ok: false
};

Bad style produces bad results

Working with the Grain (0:35:50)

JSLint (0:42:54)

Warning! JSLint will hurt your feelings.

Coming Soon

• ECMAscript Fourth Edition (ES3.1)
• ES4 - cancelled