JAVASCRIPT WTFS

how I learned to stop worrying

and love the botch that is ECMAScript

About me

Raphael PigullaBörseGo AGLead Developer JavaScript

pigulla@boerse-go.de@muddyb0y

WTF?

function foo() {return{

bar: true}

}

// what is x?var x = bar();

Semicolon Insertion

function foo() {return;{

bar: true;};

}

// what is x?var x = bar();

Semicolon Insertion

{ 1 2 } 3

{ 12 } 3

{ 1 2 } 3; ✖

{ 1;2 ;} 3; ✔

i++j

i;++j;

✔

WTF?

var foo = 42;

function bar() {foo = 13;

}

// foo is 42bar();// foo is?

WTF?

var foo = 42;

function bar() {foo = 13;var foo;

}

// foo is 42bar();// foo is?

Declaration Hoisting

var foo = 42;

function bar() {return foo;var foo = 17;

}

// what is the return value of bar() ?bar();

Function Scope

var x = 42;

function foo(n) {x = 13;while (--n > 0) {

var x = 2 * n;}

}

String Theory

// first attemptfunction isString(v) {

return typeof v === ´string´;}

isString(new String(´foo´)); // false!

String Theory

// second attemptfunction isString(v) {

return v instanceof String;}

isString(´oh dear´); // false!

String Theory

// third attemptfunction isString(v) {

return typeof v === ´string´ ||v instanceof String;

}

isString(popup.window.getSomeString());// may return false

String Theory

// fourth attemptfunction isString(v) {

return Object.prototype.toString. ⏎

call(v) === ´[object String]´;}

// until some joker changes// Object.prototype.toString... :-/

// until someone overwrites String// or RegExp.test -.-

String Theory

// fifth attemptfunction isString(v) {

return typeof v === ´string´ ||!!v && /^function String\(\)

{/⏎.test(´´ + v.constructor);

}

WTF?

(1) <Array>[] == !<Array>[](2) <Array>[] == !ToBoolean(<Array>[])(3) <Array>[] == <Bool>false(4) <Array>[] == ToNumber(<Bool>false)(5) <Array>[] == <Number>0(6) ToPrimitive(<Array>[]) == <Number>0(7) <String>[].toString() == <Number>0(8) <String>´´ == <Number>0

> [] == ![]

The Abstract Equality Comparison Algorithm

What‘s the big deal?

Well, not for everybody.

for (franz=0;franz<items.length;franz++) { var e = items[franz];

...

It turns out that if you have absolutely no idea what you‘re doing in the language, you can still generally make things work.

“„

Douglas Crockford

Why does it matter?

JavaScript is everywhere you need first class JavaScript developers weeding out the duds is difficult jQuery ≠ JavaScript

jQuery

The Checklist™

closure vs. anonymous function

functional vs. imperative languages

prototypical vs. class-based inheritance

asynchronous vs. multi-threaded code

What is the difference between...

Source: @markrendle on Twitter