Javascriptwtfs<br />how I learnedtostopworrying<br />andlovethebotchthatisECMAScript<br />
Aboutme<br />Raphael Pigulla<br />BörseGo AG<br />Lead Developer JavaScript<br />pigulla@boerse-go.de<br />@muddyb0y<br />
WTF?<br />functionfoo() {<br />return<br />	{<br />	bar: true<br />}<br />}<br />// whatis x?<br />var x = bar();<br />
Semicolon Insertion<br />functionfoo() {<br />return;<br />	{<br />	bar: true;<br />};<br />}<br />// whatis x?<br />var x...
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 />++...
WTF?<br />varfoo = 42;<br />function bar() {<br />foo = 13;<br />}<br />// foois 42<br />bar();<br />// foois?<br />
WTF?<br />varfoo = 42;<br />function bar() {<br />foo = 13;<br />varfoo;<br />}<br />// foois 42<br />bar();<br />// foois...
DeclarationHoisting<br />varfoo = 42;<br />function bar() {<br />returnfoo;<br />varfoo = 17;<br />}<br />// whatistheretu...
FunctionScope<br />var x = 42;<br />functionfoo(n) {<br />	x = 13;<br />while (--n > 0) {<br />var x = 2 * n;<br />}<br />...
String Theory<br />// firstattempt<br />functionisString(v) {<br />returntypeof v === ´string´;<br />}<br />isString(new S...
String Theory<br />// secondattempt<br />functionisString(v) {<br />return v instanceof String;<br />}<br />isString(´oh d...
String Theory<br />// thirdattempt<br />functionisString(v) {<br />returntypeof v === ´string´ ||<br />	v instanceof Strin...
String Theory<br />// fourthattempt<br />functionisString(v) {<br />returnObject.prototype.toString. ⏎<br />call(v) === ´[...
// untilsomeoneoverwrites String<br />// orRegExp.test-.-<br />String Theory<br />// fifthattempt<br />functionisString(v)...
WTF?<br />> [] == ![]<br /> <Array>[] == !<Array>[]<br /><Array>[] == !ToBoolean(<Array>[])<br /> <Array>[] == <Bool>false...
The Abstract EqualityComparisonAlgorithm<br />
What‘sthebig deal?<br />
Well, not foreverybody.<br />for (franz=0;franz<items.length;franz++) {	vare = items[franz];<br />...<br />
“<br />It turns out thatif you haveabsolutelynoideawhatyou‘redoing in thelanguage, you can still generallymakethingswork.<...
Whydoesit matter?<br />JavaScript iseverywhere<br />you needfirstclass JavaScript developers<br />weeding out thedudsisdif...
The Checklist™<br />Whatisthedifferencebetween...<br />closure vs.anonymousfunction<br />functionalvs. imperative language...
Source: @markrendle on Twitter<br />
Upcoming SlideShare
Loading in …5
×

JavaScript WTFs

2,871 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,871
On SlideShare
0
From Embeds
0
Number of Embeds
815
Actions
Shares
0
Downloads
11
Comments
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 />

×