1 de 27

A JOURNEY TO THEA JOURNEY TO THEDEEPS OF INSANITYDEEPS OF INSANITYWITH JAVASCRIPTWITH JAVASCRIPT

By Juan Ignacio Rodríguez de LeónBy Juan Ignacio Rodríguez de León at twitter at twitter@jileon@jileon

2 de 27

DISCLAIMERDISCLAIMERJavascript is a mix of many good ideas and a few (really)bad onesSpanish technical jargon for this is truño or truñacoWe are gonna have a laugh with some of the bad partsBut beware! The good parts are really goodJavaScript is like that friend of you, embarrasing, not soclever, give you a lot of troubles, but hey! he is your friend

3 de 27

WHERE THERE IS SMOKE ...WHERE THERE IS SMOKE ...

Sombras de sospecha (Shadow of Doubt, 1998)

4 de 27

THE PARADOXTHE PARADOXThe fact is the bad parts where usually included in orderto make the language more "friendly"A trouble-less, easygoing environment for the rookiedeveloper...

La cena de los idiotas (Le dîner de cons, 1998)

5 de 27

THEY WANTED TO BUILDTHEY WANTED TO BUILDSOMETHING LIKE THISSOMETHING LIKE THIS

Blancanieves y los siete enanitos(Snow White and the Seven Dwarfs, 1937)

6 de 27

GOT THISGOT THIS

Terminator (The Terminator, 1984)

7 de 27

THERE IS NO INTEGER TYPETHERE IS NO INTEGER TYPEAll numbers are stored as IEEE 754 floating pointWhat the hell were they thinking?

var a=0;for (var i=0; i<10; i++) { a += 0.1; }console.log(a === 10);

¿Quién engañó a Roger Rabbit?(Who Framed Roger Rabbit, 1988)

8 de 27

¿WHAT WOULD BE THE ANSWER?¿WHAT WOULD BE THE ANSWER?if (99999999999999999 === 100000000000000000) { console.log(‘WTF!’);} else { console.log(‘Everything ok’);}

Everything ok1. WTF! ☑2.

Resacón en Las Vegas (The Hangover, 2009)

9 de 27

GLOBAL VARIABLES EVERYWHEREGLOBAL VARIABLES EVERYWHEREThe right way of declaring a variable is using the reserved

word var. If you forgot to use it, the compiler...

give an error, compilation stops1. give a warning, compilation continues2. create the variable on the appropiate scope3. goes bananas, throws down the drain any rest of commonsense and creates a fucking global variable ☑

4.

Viaje a la perdición (Road to Perdition, 2002)

10 de 27

You make a typo, the compiler creates a variable

THINK OF ITTHINK OF ITfucking GLOBAL

Solo ante el peligro (High Noon, 1952)

11 de 27

FIND THE DIFFERENCEFIND THE DIFFERENCEvar f = function() { return { 'ok': true }; }

var f = function() { return { 'ok': true }; }

El show de Truman (The Truman Show, 1998)

12 de 27

SEMICOLONSSEMICOLONSSemicolons are “optional” in some casesJavaScript inserts semicolons wherever he believesappropiateThere is no warnings, there is no error. Embrace danger.Who wants to live forever?Just a litle question: ¿What must do a sufficientlyadvanced civilization with the guy who took this desicion?

Con faldas y a lo loco (Some Like It Hot, 1959)

13 de 27

EXTERMINATE!EXTERMINATE!

Doctor Who (Doctor Who, 1963-1989, 2005~)

14 de 27

WHAT IS THE OUTPUT OF THISWHAT IS THE OUTPUT OF THISCODE?CODE?

function() { var foo = 1; var bar = 2; alert(foo + " " + bar);}

1 2

El Señor de los anillos: Las dos torres(The Lord of the Rings: The Two Towers, 2002)

15 de 27

WHAT IF I CHANGE THE ORDER?WHAT IF I CHANGE THE ORDER?function() { var foo = 1; alert(foo + " " + bar); var bar = 2;}

Raises an "Undefined variable" Exception1. Works the same2. Do an alert with the message “1 undefined” ☑3.

¿Victor o Victoria? (Victor Victoria, 1982)

16 de 27

HOISTINGHOISTINGThe compiler does a trick named hoistingDeclarations of functions are moved to the begining of thescopeDeclarations of variables (but no the initialization) are"hoisted" tooNo error, no warning. Things are "simpler" this way

Las dos caras de la verdad (Primal Fear, 1996)

17 de 27

function() { var foo = 1; alert(foo + " " + bar); var bar = 2;}

⇩

function() { var bar; var foo = 1; alert(foo + " " + bar); bar = 2;}

La venganza de la Pantera Rosa(Revenge of the Pink Panther, 1978)

18 de 27

YES BITCHES!YES BITCHES!The compiler REWRITES your source code

Escuadrón Suicida (Suicide squad, 2016)

19 de 27

What's the meaning of thisWhat's the meaning of thisIn C++, Java, Python, etc. "this" (or "self", in some cases)

means the current instance of the class. In JavaScript, this is:

The global object (In a browser, windows)1. One object calling this function as a method2. The context passed to the function if it's called with callor apply

3.

The recently created object, when the function is calledwith new

4.

Mentiras arriesgadas (True Lies, 1994)

20 de 27

EN JAVASCRIPT, THIS IS:EN JAVASCRIPT, THIS IS:The global object (In a browser, windows) ☑1. One object calling this function as a method ☑2. The context passed to the function if it's called with callor apply ☑

3.

The recently created object, when the function is calledwith new ☑

4.

Una verdad incómoda (An Inconvenient Truth, 2006)

21 de 27

ALL OF THEN!ALL OF THEN!In other words, you have no control on the content of this. Itdepends not of you, but the one who is calling your function.

Absolutly fucking reasonable

Deadpool (Deadpool, 2016)

22 de 27

SORT SORTS (SORT OF)SORT SORTS (SORT OF)¿What is the content of var l a�er execution of this code?var l = [1, 2, 20, 10];l.sort();

[1, 2, 10, 20]1. [1, 10, 2, 20] ☑2.

La lista de Schindler (Schindler's List, 1993)

23 de 27

No further questions Your honorNo further questions Your honorLists are ordered as if were text,Lists are ordered as if were text,

regardless of their contentregardless of their content

Agárralo como puedas (Naked Gun, 1988)

24 de 27

THAT'S ALL FOLKSTHAT'S ALL FOLKSJust to finish, the icing on the cake:

In JavaScript you can comment lines or text blocksThe syntax used for the text blocks was borrowed fromPL/1; the /* and */ marksOpen question: Was this a good or bad option forJavaScript?Hint: This marks are very unlikely in PL/1

Coherence (Coherence, 2013)

25 de 27

RECOMENDATIONSRECOMENDATIONSUse the "strict" modeUse jslint (http://www.jslint.com/)Learn CoffeScript (http://coffeescript.org/) or TypeScript(http://www.typescriptlang.org/> or similarUse frameworks and/or libraries: jQuery, Angular, Meteor,Aurelia... there are a lot of thenBe careful out there

Star Trek: Más allá (Star Trek Beyond, 2016)

26 de 27

THANK YOU FORTHANK YOU FORCOMINGCOMING

Questions?Questions?

27 de 27