Professional JavaScript

Jesse Hallett
acct:hallettj@gmail.com
Open Source Bridge - June 3rd, 2010

JavaScript in one slide

var obj = {
    first: 1,
    second: 2
};

function eachProp(operation) {
    operation('first',  obj.first);
    operation('second', obj.second);
}

eachProp(function(name, value) {
    alert('The value of '+ name +' is '+
            value);
});

JavaScript is functional

functions are values

var sum = function(a, b) {
    return a + b;
};

var foo = sum;

assert( foo(2, 3) == 5 );

functions are values

var double = function(a) {
    return a * 2;
};

function twice(op, x) {
    return op(op(x));
};

assert( twice(double, 2) == 8 );

higher order functions

var array = [1, 2, 3];

var doubled = array.map(function(e) {
    return e * 2;
});

assert( doubled[2] == 6 );

var total = array.reduce(function(sum, e) {
    return sum + e;
}, 0);

assert( total == 6 );

how many languages can do this?

function mirrors() {
    return mirrors.toString();
}

assert( mirrors() ==
    "function mirrors() {
       return mirrors.toString();
     }" );

functional libraries

Underscore.js http://documentcloud.github.com/underscore/
Functional JavaScript http://osteele.com/sources/javascript/functional/

Scope

lexical scope

var x = 3;
var y = 4;

(function a() {
    var y = 5;

    assert(x == 3);
    assert(y == 5);
})();

assert(x == 3);
assert(y == 4);

function-level scope

var y = 4;

for (var i = 0; i < 10; i += 1) {
    var y = i;
}

assert(y == 9);
assert(i == 10);

functions are closures

function outer() {
    var x = 3;

    return function() {
        x += 1
        return x;
    };
}
var inner = outer();

assert(typeof x == 'undefined');

assert(inner() == 4);
assert(inner() == 5);

exceptions to lexical scope

this
arguments

`this`

refers to the receiver

var obj = {
    func: function() {
        return this;
    }
}

assert( obj.func() == obj );

except when it doesn't

var obj = {
    func: function() {
        return this;
    }
}

var func = obj.func;

assert( func() != obj );

four invocation patterns

1. function invocation

var obj = {
    func: function() {
        return this;
    }
}

var func = obj.func;

// `this` refers to the global object
assert( func() == window );

2. method invocation

var obj = {
    func: function() {
        return this;
    }
}

// `this` refers to the receiver
assert( obj.func()    == obj );
assert( obj['func']() == obj );

3. constructor invocation

var obj = {
    func: function() {
        return this;
    }
}

// `this` refers to a new object
assert( new obj.func() != obj );
assert( new obj.func() != window );

4. apply invocation

var obj = {
    func: function() {
        return this;
    }
}

var otherFunc = function() { return this; };

// `this` refers to the given argument
assert( otherFunc.apply(obj) == obj );
assert( otherFunc.call(obj)  == obj );

`apply()` and `call()`

function sum(a, b) {
    return a + b;
}

assert( sum.apply(null, [1, 2]) == 3 );
assert( sum.call(null, 1, 2)    == 3 );

`arguments`

refers to arguments list

(function(a) {

    assert( arguments[0] == 1 );
    assert( arguments[1] == 2 );

})(1, 2);

not quite an array

(function(/* args */) {

    assert( arguments.length == 2 );
    assertThrows( arguments.indexOf(2) );

})(1, 2);

how to get an actual array

(function(/* args */) {
    var args =
      Array.prototype.slice.call(arguments);

    assert( args.indexOf(2) == 1 );
})(1, 2);

a case study

var ids = [1, 2];
for (var i = 0; i < ids.length; i += 1) {
    $.getJSON('/comments/'+ ids[i],
      function(c) {
        $('#comment-'+ ids[i]).html(c.body);
    });
}

what you expected

comment #1 - Who wants smoothies?
comment #2 - Me! Me!

what you got

comment #1 -
comment #2 - Me! Me!

the solution

var ids = [1, 2];
ids.forEach(function(id) {
    $.getJSON('/comments/'+ id, function(c){
        $('#comment-'+ id).html(c.body);
    });
});

another solution

var ids = [1, 2];

function display(id) {
    $.getJSON('/comments/'+ id, function(c){
        $('#comment-'+ id).html(c.body);
    });
}

for (var i = 0; i < ids.length; i += 1) {
    display(ids[i]);
}

JavaScript is Object-Oriented

object literals

var obj = {
    foo: 1,
    bar: 2,
    sum: function(a, b) {
        return a + b;
    }
};

accessing properties

assert( obj.foo == 1 );

for (var prop in obj) {
    assert( typeof prop == 'string' );
    assert( prop in obj );

    obj[prop];
}

square bracket notation

assert( obj['foo'] == 1 );

var s = 'baz';
obj[s] = 3;

assert( obj.baz == 3 );

undefined properties

assert( typeof obj.whatev == 'undefined' );

deleting properties

delete obj.foo

assert( typeof obj.foo == 'undefined' );
assert( !('foo' in obj) );

prototypes

var proto = { foo: 1 };

function Proto() {};
Proto.prototype = proto;

var obj = new Proto();

assert( obj.foo == 1 );
assert( !obj.hasOwnProperty('foo') );

proto.foo = 2;
assert( obj.foo == 2 );

prototypes made easier

var proto = { foo: 1 };
var obj = Object.create(proto);

assert( obj.foo == 1 );
assert( !obj.hasOwnProperty('foo') );

proto.foo = 2;
assert( obj.foo == 2 );

Defining Classes

The Module Pattern

var Button = function(interval) {
    var lastPushed = new Date();

    this.push = function() {
        if (intervalElapsed()) {
            throw "You waited too long.";
        } else {
            lastPushed = new Date();
        }
    };

    function intervalElapsed() {
        var now = new Date();
        return (now - lastPushed) < interval;
    }
};

var button = new Button(108);

button.push();

Resig's Class implementation

var Button = Class.extend({
    init: function(interval) {
        this.interval = interval;
        this.lastPushed = new Date();
    },

    push: function() {
        if (this._intervalElapsed()) {
            this._badThings();
        } else {
            this.lastPushed = new Date();
        }
    },

    _intervalElapsed: function() {
        var now = new Date();
        return (now - this.lastPushed) < this.interval;
    },

    _badThings: function() {
        throw "You waited too long";
    }
});

subclassing

var EventedButton = Button.extend({
    init: function(interval) {
        this._super(interval);
        this._startCount();
    },

    push: function() {
        clearTimeout(this.timeout);
        this._startCount();
    },

    _startCount: function() {
        var self = this;
        this.timeout = setTimeout(function() {
            self._badThings();
        }, this.interval);
    }
});

encapsulation by convention

var button = new Button(108);

button._badThings();

setInterval(function() {
    clearTimeout(button.timeout);
    button._startCount();
}, 104);

jive.oo.Class

protected members

var Button = jive.oo.Class.extend(function(protected) {
    this.init = function(interval) {
        this.interval = interval;
        this.lastPushed = new Date();
    };

    this.push = function() {
        if (this.intervalElapsed()) {
            this.badThings();
        } else {
            this.lastPushed = new Date();
        }
    };

    protected.intervalElapsed = function() {
        var now = new Date();
        return (now - this.lastPushed) < this.interval;
    };

    protected.badThings = function() {
        throw "You waited too long";
    };
});

subclassing

var EventedButton = Button.extend(function(protected) {
    this.init = function(interval) {
        this._super(interval);
        this.startCount();
    };

    this.push = function() {
        clearTimeout(this.timeout);
        this.startCount();
    };

    protected.startCount = function() {
        var self = this;
        this.timeout = setTimeout(function() {
            self.badThings();
        }, this.interval);
    };
});

true encapsulation

var button = new Button(108);

assert( typeof button.badThings  == 'undefined' );
assert( typeof button.timeout    == 'undefined' );
assert( typeof button.startCount == 'undefined' );

button.push();

Events and Concurrency

JavaScript is single-threaded

var i = 0, array = [];

setInterval(function() {
    i += 1;
    array.push(i);
}, 1000);

result: array == [1, 2, 3, 4, ...]

watch out for code that blocks

var i = 0, array = [];

setInterval(function() {
    i += 1;
    array.push(i);
}, 1000);

var mark = new Date(), now;

while(true) {
    now = new Date();
    if (now - mark >= 1000) {
        mark = now;
        array.push('x');
    }
}

what you expected

array == [1, 'x', 2, 'x', 3, ...]

what you got

array == ['x', 'x', 'x', 'x', 'x', ...]

JavaScript is asynchronous

var i = 0;

$.getJSON('/feed', function(feed) {
    display(feed.count +" unread items");

    i += 1;
    assert( i == 2 );
});

i += 1;
assert( i == 1 );

correct implementation of "slow zip"

var i = 0, array = [];

setInterval(function() {
    i += 1;
    array.push(i);
}, 1000);

setInterval(function() {
    array.push('x');
}, 1000);

DOM events are asynchronous too

$('#clickme').click(function() {
    $('#clickme').text('clicked!');
});

$('#clickme').text('not clicked');

Event callback timeline

From John Resig's blog, http://ejohn.org/blog/how-javascript-timers-work/

Testing

tests and assertions

test('strict equality does not coerce', function() {
    ok( 3 !== "3", '3 is not strictly equal to "3"' );
});

test lifecycles

module('equality', {
    setup: function() {
        this.array = [1, 2, 3];
    },

    teardown: function() {
        delete this.array;
    }
});

test('array comparisons are by identity', function() {
    ok( this.array != this.array.slice(),
        'two arrays with the same values or not equal' );
});

testing asynchronous code

asyncTest('fetches a feed', 1, function() {
    $.getJSON('/feed', function(feed) {
        ok( feed.count > 0,
            'fetched feed with unread items' );
        start();
    });
});

mocking

module('feed API', {
    setup: function() {
        this.oldGet = $.getJSON

        $.getJSON = function(url, callback) {
            setTimeout(function() {
                callback({ count: 3 });
            }, 0);
        };
    },
    teardown: function() {
        $.getJSON = this.oldGet;
    }
);

asyncTest('fetches a feed', 1, function() {
    $.getJSON('/feed', function(feed) {
        ok( feed.count > 0,
            'fetched feed with unread items' );
        start();
    });
});

Top 5 reasons my code does not work in IE

1. Extra comma in object literal

var myObj = {
    foo: 1,
    bar: 2,
}

Tolerated by most browsers, syntax error in IE.
Error: "Expected identifier, string or number"
Use syntax checker like JSLint <jslint.com>.

2. Use of `Array#indexOf()`

if ([1, 2, 3].indexOf('foo') > -1) {
    return true;
}

Error: "is not a method"
Use a framework replacement such as $.inArray().
Or define this method yourself.

3. Line break between `return` and return value

function getVals() {
    return
    {
        foo: 1, bar: 2
    };
}

Return value is undefined.
Be obsessive about line breaks and semicolons.
Use a syntax checker like JSLint.

4. Invalid arguments to a native function

$('#someDiv').css('width', 'NaNpx');

Error: "invalid argument"
IE is very strict about argument validation and number of arguments.

5. Treating a built-in function like a function

var oldWrite = document.write;
document.write = function() {
    if (!$.isReady) {
        return oldWrite.apply(document,
                              arguments);
    }
};

Error: "is null or not an object"
Native functions in IE do not inherit from Function.prototype.
Borrow functions from Function.prototype.

return Function.prototype.apply.call(oldWrite, document, arguments);
Use framework methods for checking type, such as $.isFunction().

Honorable Mentions

Compressing uncached responses without max-age=0 header
Embedding Flash with max-age=0 header

Resources

Books

JavaScript: The Good Parts by Douglas Crockford
Pro JavaScript Techniques by John Resig

Tools

JSLint.com
Firebug in Firefox
Developer Tools in WebKit
Microsoft Script Debugger in IE6 and IE7
Charles Web Debugging Proxy or Fiddler Web Debugger

Portland JavaScript Admirers

space, →	next slide
←	previous slide
d	debug mode
## <ret>	go to slide #
c	table of contents (vi)
f	toggle footer
r	reload slides
z	toggle help (this)

Professional JavaScript

JavaScript in one slide

JavaScript is functional

functions are values

functions are values

higher order functions

how many languages can do this?

functional libraries

Scope

lexical scope

function-level scope

functions are closures

exceptions to lexical scope

this

refers to the receiver

except when it doesn't

four invocation patterns

1. function invocation

2. method invocation

3. constructor invocation

4. apply invocation

apply() and call()

arguments

refers to arguments list

not quite an array

how to get an actual array

a case study

what you expected

what you got

the solution

another solution

JavaScript is Object-Oriented

object literals

accessing properties

square bracket notation

undefined properties

deleting properties

prototypes

prototypes made easier

Defining Classes

The Module Pattern

Resig's Class implementation

subclassing

encapsulation by convention

jive.oo.Class

protected members

subclassing

true encapsulation

Events and Concurrency

JavaScript is single-threaded

watch out for code that blocks

what you expected

what you got

JavaScript is asynchronous

correct implementation of "slow zip"

DOM events are asynchronous too

Testing

tests and assertions

test lifecycles

testing asynchronous code

mocking

Top 5 reasons my code does not work in IE

1. Extra comma in object literal

2. Use of Array#indexOf()

3. Line break between return and return value

4. Invalid arguments to a native function

5. Treating a built-in function like a function

Honorable Mentions

Resources

Books

Tools

`this`

`apply()` and `call()`

`arguments`

2. Use of `Array#indexOf()`

3. Line break between `return` and return value