JavaScript 1.5 to 2.0John Resig (ejohn.org)Mozilla Corporation

The Big PictureECMAScript 3

JavaScript 1.5 JScriptActionScript 2 Etc.

SpiderMonkey

Rhino

AVM JScript Engine KJS (Apple)

Opera

Path to JavaScript 2

Java

Scrip

t 2

JavaS

cript

1.5

1999

JavaS

cript

1.6

2005

JavaS

cript

1.7

2006Jav

aScr

ipt 1

.8

2008 2009

JavaS

cript

1.9

The JavaScript Language✦ Current:

JavaScript 1.5 (Firefox 1, ES3)✦ JavaScript 1.6 (Firefox 1.5)✦ JavaScript 1.7 (Firefox 2)✦ JavaScipt 1.8 (Firefox 3)✦ JavaScript 1.9 (Firefox 3.1)✦ JavaScript 2 (Firefox 4, ES4)

JavaScript 1.5✦ Getters and Setters

✦ Extra power over properties✦ Two powerful uses:

✦ Private data access✦ Lazy-loading data

✦ var n = “John”;var obj = { get name(){ return n; }, set name(value){ n = value; }};obj.name = “Ted”;obj.name == “Ted” // true

Getters and Setters✦ var n = “John”;

var obj = {};obj.__defineGetter__(“name”, function(){ return n; });obj.__defineSetter__(“name”, function(value){ n = value; });obj.name = “Ted”;obj.name == “Ted”; // true

✦ obj.__lookupGetter__(“name”)// => function(){ return n; }// __lookupSetter__ too!

Lazy-Loading Data✦ var pixelsDone;

data.__defineGetter__(”pixels”, function(){ if ( pixelsDone ) return pixelsDone; pixelsDone = []; for ( var i = 0; i < pixels.length; i += 4 ){ pixelsDone.push( p.color(...) ); } return pixelsDone;});

✦ obj.pixels[3]

JavaScript 1.6✦ Array Extras

✦ indexOf / lastIndexOf[0,1,2].indexOf(1) == 1

✦ every / filter / some[0,1,2].every(function(val){ return val > 0; }); // false

✦ map[0,1,2].map(function(val){return val + 1;});// [1,2,3]

✦ forEach[0,1,2].forEach(function(val,index){});

JavaScript 1.7✦ Generators and Iterators

✦ Lazy-load data✦ Database querying

✦ Threadinghttp://www.neilmix.com/2007/02/07/threading-in-javascript-17/

Generators and Iterators✦ function fib() {

var i = 0, j = 1; while (true) { yield i; var t = i; i = j; j += t; }}var g = fib();for ( var i in g ) { document.write(i + “<br>\n”); if ( i > 100 ) break;}

let✦ Block-level statements✦ for ( let i = 0; i < 10; i++ ) { }✦ while ( true ) { let test = 5; }✦ let (test = 5) {

function stuff(){ return test; }}

✦ { let test = 5; { let test = 6; print(test);} print(test); }

Array Comprehension✦ [i for ( let i = 0; i < 3; i++ )]

// => [0, 1, 2]✦ function range(begin, end) {

for (let i = begin; i < end; ++i) { yield i; }}[i for each (i in range(0, 3))]

Destructuring✦ var [newA, newB] = [a, b];✦ var newA = a, newB = b;✦ [a, b] = [b, a]✦ function test(){ return [0, 1]; }

let [a, b] = test();var [, c] = test();

✦ var {name: name} = {name: “John”}name == “John”

✦ var {name} = {name: “John”}

JavaScript 1.8✦ Mostly a bug fix release✦ Expression Closures

function(x){ return x * x; }function(x) x * x;

✦ Generator Expressionsfunction val_iter(obj) { return (obj[x] for (x in obj));}for ( let value in val_iter(obj) ) { ... }

reduce✦ Great for summing or concating[x for ( x in 100 )] .reduce(function(a,b) a+b);

✦ [[...],[...]] .reduce(function(a,b){ a.concat(b);}, [])

✦ reduceRight

JavaScript 1.9✦ Merge object properties:

Object.extend( baseObj, otherObj )✦ Function.prototype.bind()

fn.bind(someThis)✦ “ string ”.trim()

// => “string”✦ mozilla.hashcode(someObj)

// => 1234 (unique ID)

defineProperty✦ Object.defineProperty(obj, name, value,

types)✦ var obj = {};

Object.defineProperty(obj, “name”, “John”, Object.NOT_WRITABLE | Object.NOT_DELETABLE);obj.name = “Test”;obj.name == “John”;delete obj.nameobj.name == “John”;

JSON✦ mozilla.JSON.parse(“{name:’John’}”)

// => {name: ‘John’}✦ mozilla.JSON.serialize({name:’John’})

// => “{name:’John’}”

Catchalls✦ var props = {};

var obj = { test: true, get *(name){ return props[name]; }, set *(name, value){ props[name] = value; }}

✦ obj.__defineGetter_(“”, function(){})

JavaScript 2 Goals✦ Backwards Compatible✦ Suitable to developing large systems✦ Allow for reusable libraries✦ Merge previous efforts (ActionScript)✦ Fix ECMAScript 3 bugs✦ Keep it usable for small programs

Features✦ Classes and Interfaces✦ Packages and Namespaces✦ Type Annotations✦ Strict Verification✦ Optimization✦ Syntax Shortcuts✦ Iterators and Generators✦ Self-hosting

The DirectionECMAScript 4

JavaScript 2 ActionScript 4

Tamarin

JScript Etc.

Screaming Monkey

KJS (Apple)

Opera

Tamarin✦ Tamarin

✦ New Virtual Machine from Adobe✦ Perfect for ActionScript

✦ (a mutant cousin of JavaScript 2)✦ The Three Monkeys:

✦ ActionMonkey✦ ScreamingMonkey✦ IronMonkey

Three Monkies✦ ActionMonkey

✦ Integrating Tamarin into SpiderMonkey✦ Powering Firefox 4 (?) + JavaScript 2

✦ ScreamingMonkey✦ Forcing Tamarin into Internet Explorer✦ (Kicking and screaming?)

✦ IronMonkey✦ Bringing Python + Ruby to Tamarin

Classes

Classes✦ class Programmer {

var name; var city = “Boston, MA”; const interest = “computers”; function work() {}}

✦ var p = new Programmer;p.name = “John”;p.work();p.work.apply( someotherp );p.interest = “science”; // Error

Dynamic Classes✦ dynamic class Programmer {

var name; var city = “Boston, MA”; const interest = “computers”; function work() {}}

✦ var p = new Programmer;p.lastName = “Resig”;for ( var i in p ) alert( i );// alert( “Resig” );

Getters and Setters✦ class Programmer {

var _name; function get name(){ return _name; } function set name(value){ _name = value + “ Resig”; }}

✦ var p = new Programmer;p.name = “John”;alert( p.name );// “John Resig”

Catch-Alls✦ dynamic class Programmer {

meta function get(name) { ... } meta function set(name, value) { alert(“Setting “ + name + “ to “ + value); }}

✦ var p = new Programmerp.name = “John”;// alert(“Setting name to John”);

Inheritance✦ class Artist {

function draw() { alert(“Drawing!”); }}class Designer extends Artist { override function draw() { alert(“Designing!”); }}

✦ var d = new Designerd.draw();// alert(“Designing!”);

Inheritance (cont.)✦ ‘final’ methods can’t be overriden✦ class Artist {

final function draw() {alert(“Drawing!”);}}class Designer extends Artist { // ERROR: Can’t override draw! override function draw() { alert(“Designing!”); }}

Inheritance (cont.)✦ ‘final’ classes can’t be inherited from✦ final class Artist {

function draw() { alert(“Drawing!”); }}

// ERROR: Can’t inherit from Artistclass Designer extends Artist { override function draw() { alert(“Designing!”); }}

Metaclass✦ Provide global functions and properties on

a class object✦ class Users {

static function find( name ) { // ... }}

✦ Users.find( “John” );

Interfaces✦ Verify that a class implements another✦ class Artist {

function draw();}

class Designer implements Artist { function draw() { alert(“Designing!”); }}

✦ if ( Designer is Artist ) alert(“Designers are Artists!”);

Types

Types✦ Types are broken down into:

✦ string✦ double (ECMAScript 3-style Number)✦ boolean

Type Annotations✦ var name : string = “John”;✦ let x : double = 5.3;✦ function stuff( x: string, obj: Object ) :

boolean {}

Function Types✦ Only return specific types:

function isValid() : boolean { }✦ Only be used on certain objects types:

function every( this: Array ) { for ( var i = 0; i < this.length; i++ ) alert( this[i] );}every.call( [0,1,2] );// alert(0); alert(1); alert(2);every.call({a: “b”});// ERROR

Rest Arguments✦ function stuff( name, ...values ){

alert( values.length );}

✦ stuff( “John”, 1, 2, 3, 4 );// alert( 4 );

✦ function stuff( name : string, ...values : [double] ) : void { alert( values.length );}

✦ var array = [1,2,3,4];stuff( “John”, ...array );

Union and Any Types✦ var test : (string, double) = “test”;

test = 3;test = {}; // ERROR

✦ These are equivalent:✦ var test : * = “test”;✦ var test = “test”;

Type Definitions✦ type Point = { x: double, y: double };✦ var p : Point = { x: 3.0, y: 24.0 };

Nullability✦ Prevent variables from accepting null

values✦ var name : * = “John”;✦ var name : string! = “John”;

name = “Ted”;name = null; // ERROR

✦ function test( name: string? ) { alert( name );}

Initialization✦ class User {

var name : string!; // Must be initialized function User( n ) : name = n { // ... }}

“like”✦ type Point = { x: double, y: double };✦ if ( { x: 3, y: 5 } like Point )

alert( “That looks like a point to me!” );✦ if ( !({ x: 3 } like Point) )

alert( “Not a point!” );✦ // Loop over array-like things:

function every( a: like { length: double } ) { for ( var i = 0; i < a.length; i++ ) alert( a[i] );}

Parameterized Types✦ var m: Map.<string, *>;✦ class Point.<T> {

var x: T, y: T;}

✦ var p = new Point.<double>;p.x = 3.0;p.y = 5.0;

Structure

Namespaces✦ namespace extra = “extra”;✦ Pre-defined namespaces:

✦ __ES4__✦ intrinsic✦ iterator✦ meta

✦ Namespaced variables:iteration::StopIterationintrinsic::readFile

Multimethods✦ generic function intersect(s1, s2);

generic function intersect(s1: Shape, s2: Shape ) { // ...}generic function intersect(s1: Rect, s2: Rect ) { // ...}

✦ generic function test(a: Object?, b...

✦ generic function test(a: Object!

Iteration✦ class Fib {

private var a=0, b=1;

iterator function get(deep:boolean = false) : IteratorType.<double> this

public function next(): double { if ( b > 100 ) throw iterator::StopIteration; [a,b] = [b,a+b]; return a; }}

✦ for ( let i in new Fib ) alert( i );

For .. Each✦ For each loops through values✦ let s = “”;

for each ( let n in [“a”,”b”,”c”] ) s += n;alert(s);// “abc”

Self-Hosting

Map.es✦ The reference implementation’s classes are

written in ECMAScript✦ package{ use namespace intrinsic; use default namespace public; intrinsic class Map.<K,V> { static const length = 2; function Map(equals=intrinsic::===, hashcode=intrinsic::hashcode) : equals = equals , hashcode = hashcode , element_count = 0 { } // ...}

More Info✦ ECMAScript 4 Progress:

http://spreadsheets.google.com/ccc?key=pFIHldY_CkszsFxMkQOReAQ&hl=en

✦ ECMAScript 4 White Paper Overview:http://www.ecmascript.org/es4/spec/overview.pdf

✦ Blogging:http://ejohn.org/