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

The Big Picture
ECMAScript 3
JavaScript 1.5 ActionScript 2 JScript Etc.
SpiderMonkey AVM JScript Engine KJS (Apple)
Rhino Opera

Jav
aS
1999
crip
t1
.5
Jav
2005
aS
crip
t1
.6
Jav
2006
aS
crip
t1
.7
Jav
aS
2008
c
Jav ript
aS 1.8
cr
ipt
Ja
Path to JavaScript 2
1.9
va
2009
Sc
ri
pt
2

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
✦ Threading
http://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 Expressions
✦
function 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.name
obj.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 Direction
ECMAScript 4
JavaScript 2 ActionScript 4 JScript Etc.
Screaming
Tamarin KJS (Apple)
Monkey
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 Programmer
✦
p.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 Designer
✦
d.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 Artist
class 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::StopIteration
intrinsic::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/