Peculiar JS

Yes it's strange, but we have to learn more about it!

Transcript

1. Peculiar-JS @arturparkhisenko 2016
2. by Dune-Dzn laziness and procrastination
3. not WAT not bad not ugly just learn MOAR!
5. Yup, again... Numbers 2 / 0.002 == 1000 // yes it’s fine! but: 0.1 + 0.2 == 0.3 // false 0.3 - 0.2 == 0.1 // false 0.1 + 0.2 = 0.30000000000000004 0.3 - 0.2 = 0.09999999999999998
6. examples 90071992547409921 // 17 characters 90071992547409920 // output 9007199254740992 + 1 9007199254740992 9007199254740992 + 3 9007199254740996
8. info Youtube Video from Bartek Szopka: Everything you never wanted to know about JavaScript numbers - JSConf EU 2013 https://en.wikipedia.org/wiki/Double-precision_floating-point_format https://en.wikipedia.org/wiki/IEEE_floating_point http://frontender.info/nan-is-not-a-not-a-number/
9. So.. a little bit about Languages V8 written on C++, and JS compiled JIT (article) JVM languages (Java, Clojure and Scala) and C-based languages (C/C++, Python, Perl) give result 0.1 + 0.2 != 0.3. Other 11 languages like: Common Lisp, COBOL, Fortran, Pascal and PL/SQL all give a "true" result to 0.1 + 0.2 = 0.3. source So thats why JS have hoisting too, source
10. Hoisting example function func() { return varOrFunc; // 1 varOrFunc = 1; // 2 function varOrFunc() { // 3 console.log("Inside") } var varOrFunc = '2'; // 4 } function func() { function varOrFunc() { // 3 console.log("Inside") } var varOrFunc; // 2.1 return varOrFunc; // 1 varOrFunc = 1; // 2.2 varOrFunc = '2'; // 4 } source
11. this in JS // in object var user = { name: 'John Doe', sayHi: function() { showName(this); } }; function showName(namedObj) { alert( namedObj.name ); } user.sayHi(); // 'John Doe' // in function part 1 var friend = { firstName: "Superman" }; var enemy = { firstName: "Batman" }; function func() { alert( this.firstName ); } friend.a = func; enemy.b = func; friend.a(); // Superman enemy.b(); // Batman enemy['b'](); source
12. // in function part 2 function func() { alert( this ); } func(); // [object Window] or [object global] function strictFunc() { "use strict"; alert( this ); } strictFunc(); // undefined // in function part 3 var user = { name: "John Doe", hi: function() { alert(this.name); }, bye: function() { alert("Bye"); } }; user.hi(); // John Doe (usual usage) // but now another call ( related to obj.method(), but now we’ll get a Reference Type) (user.name == "John Doe" ? user.hi : user.bye)(); // undefined source
13. JS weird parts [1,2,3] == [1,2,3]; //false Because it’s simply a reference type. That’s common for most languages. But what if we: new Array(3) == ",,"; //true Wow, true?! Yeah…because the string representation of new Array(3): new Array(3).toString(); //",,"
14. Comparing objects “If I show this paragraph to my Calculus professor he may perform a suicide…” Lets create two objects and keep their references in two variables with different references: var o1 = {}, o2 = {}; o1 == o2 || o1 === o2 // false but... o1 >= o2 && o1 <= o2 // true o1 != o2 && o1 !== o2 // true
15. A tip from WT*JS LocalStorage limitations with some surprising behaviour localStorage.setItem('peopleCanFly', false); if (localStorage.getItem('peopleCanFly') { console.log('yeah!'); // runs?! } From the specification localStorage only accepts string values! If you want to store an object or other type of value, you can serialize the data with JSON.stringify and load it again with JSON.parse. — @Overv Also i personally recommend you to read all js-by-examples by bmkmanoj
16. Thanks Gary Bernhardt for ‘WAT’ {} * [], {} / [] SyntaxError [] + [] "" [] + {} "[object Object]" {} + [], [] * [] , [] - [] 0 {} + {} NaN //in firefox now "[object Object][object Object]" //in chrome now [] * {}, [] - {}, {} * {}, {} - {}, [] / [], [] / {}, {} / {} NaN {} - [] -0
17. WAT2? and WTF Why JavaScript Is So Awesomely S**k, by Pavel Kaminsky NaN instanceof Number false NaN === NaN false [5,4,3,2,1].sort() [1,2,3,4,5] [-5,-4,-3,2,-1].sort() [-1,-3,-4,-5,2] 3 > 2 > 1 false Number(null) //0, but null != 0 //yeah, source 'abc'.constructor == String typeof 'abc' "string" 'abc' instanceof String false var hello = function(){ console.log('hi')}; //run that ((hello)() + 'World!') //result hi "undefinedworld"
18. Additional tips about base(radix) parseInt('09/10/08'); //0 parseInt('09/10/08', 10); //9, which is most likely what you want from a date {}), ({lol:'wut'} // dunno how to name it.. source // typeof null is object, source if (typeof obj === 'object' && obj !== null){ console.info(obj.prop); }
19. MORE JS? from Mattew @weitzelb function dis() {return this;} five = dis.call(5); // Number, primitive val 5 five.wtf = ‘potato’ // five.wtf === ‘potato’ five * 5 //25 five.wtf // ‘potato’ five++ // 5 five.wtf // undefined five.wtf = ‘potato?’ five.wtf // undefined five // 6
20. JS**** []()!+, 6 characters How-to, 50 shades of … JS: // 'a' 846 chars (false+"")[1] // 'z' 2638 chars, 'Z' 7415 chars (+(35))["toString"](36) // 'x' 2613 chars (+(101))["toString"](34)[1] // '{' 982 chars, numeral system (NaN+[]["filter"])[21] Another JS framework needs our help!
21. Simple example: [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+ (![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[ !+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[] )[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[! +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+ !+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+( !![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+ []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![] +[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]...
23. First Law of Software Quality errors = (more code)2 e = mc2
24. +arturparkhisenko 2016 https://arturparkhisenko.github.io/