Weird (but useful) JavaScript

... but isn't all JavaScript weird?

Andrew Chilton <chilts@appsattic.com>
http://www.appsattic.com/

Comparative Size of Books

JavaScript: The Definitive Guide - 1098 pages!!!
JavaScript: The Good Parts - just 145 pages
PHP: The Good Parts - just 176 pages

Comparative Size of Books

JavaScript: The Definitive Guide - 1098 pages!!!
JavaScript: The Good Parts - just 145 pages
PHP: The Good Parts - just 176 pages
Programming Perl - 1092 pages!!!

Comparative Size of Books

JavaScript: The Definitive Guide - 1098 pages!!!
JavaScript: The Good Parts - just 145 pages
PHP: The Good Parts - just 176 pages
Programming Perl - 1092 pages!!!
Perl: The Good Parts - None Exist

Comparative Size of Books

JavaScript: The Definitive Guide - 1098 pages!!!
JavaScript: The Good Parts - just 145 pages
PHP: The Good Parts - just 176 pages
Programming Perl - 1092 pages!!!
Perl: The Good Parts - None Exist
That's an awful lots of crap!

Type Coercion - The Wrong Way

Using == is bad

''        == '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

Type Coercion - The Right Way

Use ===

''        === '0'       // false
0         === ''        // false
0         === '0'       // false

false     === 'false'   // false
false     === '0'       // false

false     === undefined // false
false     === null      // false
null      === undefined // false

' \t\r\n' === 0         // false

Functions as Methods

var lion = { noise : 'roar' };
var bear = { noise : 'growl' };
var cat  = { noise : 'meow' };

var speak = function(say) {
    console.log(say + this.noise + '!');
}

speak.call(lion, 'Hear me '); // Hear me roar!
speak.call(bear, 'Make me '); // Make me growl!
speak.call(cat,  'I say '  ); // I say meow!

speak.apply(lion, [ 'Hear me ' ]); // Hear me roar!
speak.apply(bear, [ 'Make me ' ]); // Make me growl!
speak.apply(cat,  [ 'I say '   ]); // I say meow!

Passing an Index to a Handler (jQuery)

The Wrong Way - i is always 3 in every handler

var items = [ 'red', 'green', 'blue' ];

for ( var i = 0; i < items.length; i++ ) {

    $('#' + items[i]).click(function(ev) {
        console.log('This is item number ' + i);
    });

}

Passing an Index to a Handler (jQuery)

The Right Way - close over 'i'

var items = [ 'red', 'green', 'blue' ];
for ( var i = 0; i < items.length; i++ ) {
    $('#' + items[i]).click((function(shadow) {
        return function(ev) {
            console.log('This is item number ' + shadow);
        };
    })(i));
}

or in ES5

var items = [ 'red', 'green', 'blue' ];
items.forEach(function(v, i) {
    $('#' + v).click(function(ev) {
        console.log('This is item number ' + i);
    });
});

Object Methods as Event Handlers

The Wrong Way

var obj = {
    myHandler : function() { ... },
};

var handler = obj.myHandler();

// .. but 'this' is the global object
$('a').click(handler);

The Right Way

var boundHandler = handler.bind(obj);

// 'this' is now obj and can't be changed
$('a').click(boundHandler);

You can also use a closure

sum()

function sum() {
    var i,
        n = arguments.length,
        total = 0;
    for ( i = 0; i < n; i++ ) {
        total += arguments[i];
    }
    return total;
}

In ES5:

function sum() {
    return arguments.reduce(function(a, b) {
        return a + b;
    }, 0);
}

With Statement - The Wrong Way

with (obj) {
    foo = bar; // what does this mean?
}

obj.foo = bar;
obj.foo = obj.bar;
foo = bar;
foo = obj.bar;

Which is the correct assignment?

With Statement - The Right Way

with (obj) {
    foo = bar; // what does this mean?
}

obj.foo = bar;
obj.foo = obj.bar;
foo = bar;
foo = obj.bar;

DON'T USE THIS! EVER. NO. NADDA. JUST ... DON'T! Pleeeeeeaasssseeee!!!
ambiguous
error-prone
don't use it

Where JavaScript got it Right!

Numbers
No int, byte, float, double, long, etc
But if you represent money, multiply it by 100 ;)