Slide 1

Slide 1 text

Peculiar-JS @arturparkhisenko 2016

Slide 2

Slide 2 text

by Dune-Dzn laziness and procrastination

Slide 3

Slide 3 text

not WAT not bad not ugly just learn MOAR!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

examples 90071992547409921 // 17 characters 90071992547409920 // output 9007199254740992 + 1 9007199254740992 9007199254740992 + 3 9007199254740996

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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/

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

// 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

Slide 13

Slide 13 text

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(); //",,"

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Thanks Gary Bernhardt for ‘WAT’ {} * [], {} / [] SyntaxError [] + [] "" [] + {} "[object Object]" {} + [], [] * [] , [] - [] 0 {} + {} NaN //in firefox now "[object Object][object Object]" //in chrome now [] * {}, [] - {}, {} * {}, {} - {}, [] / [], [] / {}, {} / {} NaN {} - [] -0

Slide 17

Slide 17 text

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"

Slide 18

Slide 18 text

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); }

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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!

Slide 21

Slide 21 text

Simple example: [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+ (![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[ !+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[] )[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[! +[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+ !+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+( !![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+ []]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![] +[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]...

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

First Law of Software Quality errors = (more code)2 e = mc2

Slide 24

Slide 24 text

+arturparkhisenko 2016 https://arturparkhisenko.github.io/