JavaScript the Good Parts - illyfrancis/scribble GitHub Wiki

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
  1. Define some variables and functions
  • these become private members
  1. Augment the object with privileged methods
  2. 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