Upcoming SlideShare
×

# JavaScript WTFs

2,871 views

Published on

Published in: Technology
1 Like
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
2,871
On SlideShare
0
From Embeds
0
Number of Embeds
815
Actions
Shares
0
11
0
Likes
1
Embeds 0
No embeds

No notes for slide

### JavaScript WTFs

1. 1. Javascriptwtfs<br />how I learnedtostopworrying<br />andlovethebotchthatisECMAScript<br />
2. 2. Aboutme<br />Raphael Pigulla<br />BörseGo AG<br />Lead Developer JavaScript<br />pigulla@boerse-go.de<br />@muddyb0y<br />
3. 3. WTF?<br />functionfoo() {<br />return<br /> {<br /> bar: true<br />}<br />}<br />// whatis x?<br />var x = bar();<br />
4. 4. Semicolon Insertion<br />functionfoo() {<br />return;<br /> {<br /> bar: true;<br />};<br />}<br />// whatis x?<br />var x = bar();<br />
5. 5. Semicolon Insertion<br />{ 1 2 } 3<br />{ 1 2 } 3;<br />✖<br />{ 1<br />;2;} 3;<br />{ 1<br />2 } 3<br />✔<br />i;<br />++<br />j;<br />✔<br />i<br />++<br />j<br />
6. 6. WTF?<br />varfoo = 42;<br />function bar() {<br />foo = 13;<br />}<br />// foois 42<br />bar();<br />// foois?<br />
7. 7. WTF?<br />varfoo = 42;<br />function bar() {<br />foo = 13;<br />varfoo;<br />}<br />// foois 42<br />bar();<br />// foois?<br />
8. 8. DeclarationHoisting<br />varfoo = 42;<br />function bar() {<br />returnfoo;<br />varfoo = 17;<br />}<br />// whatisthereturnvalueof bar() ?<br />bar();<br />
9. 9. FunctionScope<br />var x = 42;<br />functionfoo(n) {<br /> x = 13;<br />while (--n > 0) {<br />var x = 2 * n;<br />}<br />}<br />
10. 10.
11. 11. String Theory<br />// firstattempt<br />functionisString(v) {<br />returntypeof v === ´string´;<br />}<br />isString(new String(´foo´)); // false!<br />
12. 12. String Theory<br />// secondattempt<br />functionisString(v) {<br />return v instanceof String;<br />}<br />isString(´oh dear´); // false!<br />
13. 13. String Theory<br />// thirdattempt<br />functionisString(v) {<br />returntypeof v === ´string´ ||<br /> v instanceof String;<br />}<br />isString(popup.window.getSomeString());<br />// mayreturnfalse<br />
14. 14. String Theory<br />// fourthattempt<br />functionisString(v) {<br />returnObject.prototype.toString. ⏎<br />call(v) === ´[object String]´;<br />}<br />// untilsomejokerchanges<br />// Object.prototype.toString... :-/<br />
15. 15. // untilsomeoneoverwrites String<br />// orRegExp.test-.-<br />String Theory<br />// fifthattempt<br />functionisString(v) {<br />returntypeofv ===´string´ ||<br />!!v && /^function String() {/⏎<br /> .test(´´ + v.constructor);<br />}<br />
16. 16. WTF?<br />> [] == ![]<br /> <Array>[] == !<Array>[]<br /><Array>[] == !ToBoolean(<Array>[])<br /> <Array>[] == <Bool>false<br /> <Array>[] == ToNumber(<Bool>false)<br /> <Array>[] == <Number>0<br />ToPrimitive(<Array>[]) == <Number>0<br /><String>[].toString() ==<Number>0<br /> <String>´´ == <Number>0<br />
17. 17. The Abstract EqualityComparisonAlgorithm<br />
18. 18. What‘sthebig deal?<br />
19. 19. Well, not foreverybody.<br />for (franz=0;franz<items.length;franz++) { vare = items[franz];<br />...<br />
20. 20. “<br />It turns out thatif you haveabsolutelynoideawhatyou‘redoing in thelanguage, you can still generallymakethingswork.<br />„<br />Douglas Crockford<br />
21. 21.
22. 22.
23. 23. Whydoesit matter?<br />JavaScript iseverywhere<br />you needfirstclass JavaScript developers<br />weeding out thedudsisdifficult<br />jQuery ≠ JavaScript<br />jQuery<br />
24. 24. The Checklist™<br />Whatisthedifferencebetween...<br />closure vs.anonymousfunction<br />functionalvs. imperative languages<br />prototypicalvs.class-basedinheritance<br />asynchronousvs. multi-threadedcode<br />
25. 25. Source: @markrendle on Twitter<br />