The document discusses various topics related to JavaScript including: - Inconsistencies in type checking and comparisons - Issues with treating null and undefined the same - Problems that can occur with reference types like objects and arrays - Use of the 'this' keyword in functions and methods - Implementing inheritance between objects The overall message is that JavaScript has some quirks but it is important to learn its paradigms and criticize the language constructively.

1. Não alimente os trolls:
Javascript é bonito!
@rafael_sps

2. Quem?
Tecnólogo em Telecomunicações IFSul
Rafael Specht da Silva

6. Javascript
até que é
bonito!
@rafael_sps

7. Javascript é
bonito legal!
@rafael_sps

16. “Se JavaScript não fosse tão
feia, um livro chamado
‘JavaScript: The Good Parts’
não seria o best-seller da
linguagem na Amazon”
http://simpleprogrammer.com/2013/05/06/why-javascript-is-doomed/

17. Inconsistente

18. typeof {} // ‘object’
typeof [] // ‘object’

19. typeof null // ‘object’
typeof undefined // ‘undefined’
undefined == null // true

20. +

21. var n1 = 2;
var n2 = 3;
n1 + n2 // 5
var n1 = 2
var n2 = ‘3’
n1 + n2 // ‘23’

23. https://twitter.com/1Marc/status/486803289175232512

24. == e ===

25. 0 == false // true
0 === false // false
1 == true // true
1 === true // false

26. var url1 = 'http://localhost/rs/santa-maria'
var url2 = 'http://localhost/'
var getState = function (url) {
var stateMatch = url.match(//[a-z]{2}//gi);
var state = null;
if (stateMatch !== null && stateMatch.length > 0) {
state = stateMatch[0].replace(///g, '');
}
return state;
}
getState(url1); // ‘rs’
getState(url2); // null

27. “Se você trata null e
undefined igualmente, é
recompensado com
comparações mais simples”
https://speakerdeck.com/getify/new-rules-for-javascript

28. if (stateMatch !== null && stateMatch.length > 0) {
state = stateMatch[0].replace(///g, '');
}
if (stateMatch && stateMatch.length) {
state = stateMatch[0].replace(///g, '');
}

29. var data = {name: 'Luke', surname: 'Skywalker'}
var User = function (name, surname) {
this.name = name;
this.surname = surname;
this.getCompleteName = function () {
return this.name + ' ' + this.surname;
}
}
var user = new User(data.name, data.surname)
user.getCompleteName(); // 'Luke Skywalker'

30. var data = {name: 'Luke'}
var user = new User(data.name, data.surname)
user.getCompleteName(); // 'Luke undefined'

31. var data = {name: 'Luke'}
var User = function (name, surname) {
this.name = name;
this.surname = surname || '';
this.getCompleteName = function () {
return this.name + ' ' + this.surname;
}
}
var user = new User(data.name, data.surname)
user.getCompleteName(); // 'Luke '

32. this

33. var UserView = function () {
function setName (name) {
this.name = name;
}
function setEvents () {
var that = this;
$('.hit').on('click', function () {
console.log(this); // <button class="hit">Hit me!</button>
$(this).toggleClass('odd');
that.setName($('.name').val());
});
}
return {
setEvents: setEvents,
setName: setName
}
}

34. function setEvents () {
var that = this;
$('.hit').on('click', function () {
console.log(this);
$(this).toggleClass('odd');
that.setName($('.name').val());
});
}

35. function setEvents () {
var button = $('.hit');
function handler () {
console.log(this);
button.toggleClass('odd');
this.setName($('.name').val());
}
button.on('click', handler.bind(this));
}
https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex1.html

37. var Human = {
setName: function (name) {
console.log(this);
this.name = name;
},
sayHi: function () {
return 'Hi! My name is ' + this.name + '!';
}
}

38. var Ninja = {
setName: Human.setName,
setStealhLevel: function (level) {
console.log(this)
this.stealthLevel = level;
}
}

39. var Turtle = {
setHullLevel: function (level) {
console.log(this);
this.hullLevel = level;
}
}
var NinjaTurtle = {
setName: Ninja.setName,
setStealhLevel: Ninja.setStealhLevel,
setHullLevel: Turtle.setHullLevel
}

40. var raphael = Object.create(NinjaTurtle, {});
raphael.setName('Raphael');
raphael.setStealhLevel(50);
raphael.setHullLevel(100);
console.log(raphael);
console.log(raphael.sayHi);
https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex2.html

41. Objetos
mantém
referência

42. var a = [1, 2, 3];
var b = a;
b.pop();
console.log(a); // [1, 2]
console.log(b); // [1, 2]

43. MODAIS
https://github.com/rssilva/presentations/tree/master/front-in-sm-
2015/objectsByReference

44. É importante:
- ter bom-humor!
- criticar construtivamente
- aprender os paradigmas

45. Toda linguagem tem
peculiaridades. Aprender
a lidar com elas é parte do
nosso trabalho.

46. Obrigado!
github.com/rssilva
twitter.com/rafael_sps
speakerdeck.com/rssilva