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();
     }" );

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);

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);

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);
    });
}

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();

jive.oo.Class

Events and Concurrency

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');
    }
}

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');

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

Testing

Top 5 reasons my code does not work in IE

Resources