O documento discute boas e más práticas em JavaScript. Apresenta problemas comuns como tipo de dados inconsistentes, concatenação de strings e números, variáveis globais acidentais e undefined != null. Também destaca recursos úteis como destructuring, prototype, objetos e código comentado. Por fim, incentiva o uso do navegador para debugar e referencia artigos sobre os tópicos discutidos.

1. JavaScript das Ruas
Tudo o que você não deve fazer
Dan Vitoriano
@dnvtrn
@dnvtrn

2. BEM LOKO

3. DOMINA

4. NINGUÉM SEGURA

5. ATALHOS

6. Que que tá
pegando?

7. @raphamorims

8. @pokemaobr

9. Iniciantes

10. PERIGO!

11. Esse dia foi loko….

17. PESQUISA

18. O que você faz em
JavaScript que te
envergonha?

19. O que os outros fazem
com JavaScript que
você considera ruim?

20. Qual a coisa mais bonita que
uma pessoa desenvolvedora
pode fazer em JavaScript mas
geralmente não faz?

21. BAD PRACTICES

22. BAD PARTS

23. GOOD PARTS

24. VAI MALANDRA

25. Callback Hell

27. var bagulhos;

29. jQuery no meio dos
bagulho

31. Kilômetros de JavaScript em um único arquivo

32. If ternário sem dó

33. bagulhos ? true :
bagulhos === 'Kondzilla' ? true :
bagulhos !== 'Anitta' ? true : null

34. ZUADO

35. The Bad Parts

36. Tipos

37. console.log(5 == "5"); // true
console.log(25 == "0x19"); // true
console.log(1 == true); // true
console.log(0 == false); // true
console.log(2 == true); // false

40. Números

41. > console.log(0.1 + 0.2);
Misericórdia…
= 0.30000000000000004

43. Variáveis Globais

44. function foobar() {
var bar = 10;
//
// [...Code...]
//
baz = 20; // Typo. "baz" is now a global variable.
}

46. undefined != null

47. undefined != null

48. Adição e
Concatenação

49. var x = 10;
var y = 5;
var z = x + y;
console.log(z);
15
var x = 10;
var y = "5";
var z = x + y;
console.log(z);
"105"

50. var x = 10;
var y = 5;
var z = x - y;
console.log(z);
5
var x = 10;
var y = "5";
var z = x - y;
console.log(z);
5
var x = "5";
var y = 5;
var z = x - y;
console.log(z);
5
var x = "10";
var y = "5";
var z = x - y;
console.log(z);
5

51. PARTES
ZICA

52. Prototype

53. __proto__
Construtores
Polimorfismo

54. Objetos

55. Tem métodos
Segue o protótipo
Facilita os testes

56. Destructuring

57. function example(metadata) {
var englishTitle = metadata.title,
localeTitle = metadata.translations[0].title;
…; // use englishTitle and localeTitle
}

58. function example({title: englishTitle, translations: [{title: localeTitle}]}) {
…; // use englishTitle and localeTitle
}

60. Código Comentado

61. class Tumbalatum extends TaTumTum.Component {
static propTypes = {
handleSubmit: PropTypes.func
};
handleSubmit = () => {};
render(){
return(
<div>Cê acredita?!</div>
)
}
}

62. class Tumbalatum extends TaTumTum.Component {
static propTypes = {
handleSubmit: PropTypes.func
};
/* istanbul ignore next */
handleSubmit = () => {};
render(){
return(
<div>Cê acredita?!</div>
)
}
}

64. Usar o browser pra
debugar os bagulhos

67. vamos pras idea…

72. Referências
• https://medium.com/@Rewieer/javascript-the-bad-parts-and-how-to-avoid-them-1a7c9bc5a0dd
• https://whydoesitsuck.com/why-does-javascript-suck/
• https://www.w3schools.com/js/js_mistakes.asp
• https://enmascript.com/articles/2019/09/20/two-exceptional-use-cases-for-the-spread-operator-you-may-
not-know-of
• https://talyssonoc.github.io/2015/11/23/JavaScript-adicione-acucar-a-gosto-e-pare-de-reclamar/
• http://nodebr.com/javascript-nao-e-bagunca/
• http://programadorobjetivo.co/7-problemas-de-estilo-de-codigo-em-javascript/
• https://medium.com/tableless/3-problemas-em-javascript-para-resolver-com-a-
especifica%C3%A7%C3%A3o-spread-operator-c5db0b5b1f6b
• https://medium.com/@madasamy/15-javascript-concepts-that-every-nodejs-programmer-must-to-
know-6894f5157cb7

73. VAMOS PRAS IDEIAS!
(Obrigado!)
@dnvtrn
@dnvtrn