Funções em JavaScript

Palestra sobre funções em JavaScript e algumas das alterações acrescidas na versão ES2015.
Escopo, fluxo e syntaxe, vamos discutir o por que das alterações, e compreender exatamente como as Funções funcionam no JavaScript.

Transcript

1. Funções em JavaScript fluxo, escopo e sintaxe @felipenmoura
2. Who Am I ~10 anos de desenvolvimento Apaixonado pela Fundador/organizador da BrazilJS e RSJS e FrontInPoa web
3. Who Am I @felipenmoura fb.com/ http://felipenmoura.com felipenmoura
4. Começamos pelo escopo
5. Começamos pelo - Contexto da execução - Pode ser global, local ou de eval - Tem acesso ao escopo externo escopo
6. GLOBAL
7. GLOBAL Local 1 Local 2
8. GLOBAL Local 1 Local 2 Local 1.1 Local 2.1 Local 2.2
9. GLOBAL Local 1 Local 2 Local 1.1 Local 1.1.1 Local 2.1 Local 2.2
10. GLOBAL Local 1 Local 2 Local 1.1 Local 1.1.1 Local 2.1 Local 2.2
11. GLOBAL Local 1 Local 2 Local 1.1 Local 1.1.1 Local 2.1 Local 2.2
12. GLOBAL Local 1 Local 2 Local 1.1 Local 1.1.1 Local 2.1 Local 2.2
13. GLOBAL Local 1 Local 2 Local 1.1 Local 1.1.1 Local 2.1 Local 2.2
14. GLOBAL Local 1 Local 2 Local 1.1 Local 1.1.1 Local 2.1 Local 2.2
15. GLOBAL Local 1 Local 1.1 Local 1.1.1
18. Vamos falar de fluxo
19. - Ordem da execução - Existem controles para o fluxo Vamos falar de fluxo
20. Fluxo Cada aba do navegador tem a sua main thread. Nela, é onde tudo acontece: JS, repaint, redraw...
21. Controles de Fluxo if/else switch for while try function calls
22. Fluxo
23. Fluxo 3 1 2 4 5
24. Fluxo 3 1 2 4 5
25. Fluxo 1 2 3 5 4
26. Hoisting
27. Fluxo / Hoisting Iça as variáveis
28. Fluxo / Lazy comparing
29. Fluxo / Lazy comparing Caminho mais fácil
30. Quebrando o fluxo setTimeout / setInterval
31. Quebrando o fluxo setTimeout / setInterval O setInterval vai "furar a fila"!
32. Quebrando o fluxo setTimeout / setInterval O setTimeout e a 5ª execução!
33. Quebrando o fluxo setTimeout
34. setImmediate Quebrando o fluxo
35. XMLHTTPRequest WebWorker (ambiente controlado) Eventos do DOM WebSockets Quebrando o fluxo
36. Funções por Definição vs Token de function no início de um statement Definição Instrução
37. Funções por Definição vs Caso contrário, é uma instrução (sem hoisting) Definição Instrução
38. Funções por Definição vs Caso contrário, é uma instrução (sem hoisting) Definição Instrução
39. Funções por Definição vs Caso contrário, é uma instrução (sem hoisting) Definição Instrução
40. Anonima...ou não
41. Anonima...ou não
42. Anonima...ou não
43. Anonima...ou não
44. Fluxo + Escopo Let's talk about this!
45. Fluxo + Escopo Let's talk about this! Window
46. Fluxo + Escopo Let's talk about this!
47. Fluxo + Escopo Let's talk about this! { x: 1 }
48. Fluxo + Escopo Let's talk about this!
49. Fluxo + Escopo Let's talk about this! { prop: "Some Prop", fn: function }
50. call, apply e bind
51. call, apply e ...
52. call, apply e ...
53. call, apply e ...
54. call, apply e ...
55. call, apply e ...
56. … bind
57. … bind
58. … bind
59. Fluxo + Escopo Let's talk about this...later
60. Fluxo + Escopo Let's talk about this...later x = { prop: "Some Prop", fn: function }
61. Fluxo + Escopo Let's talk about this...later Após 2 segundos: Window
62. Fluxo + Escopo Let's talk about...that?
63. Fluxo + Escopo Let's talk about...that? guardamos o this
64. Fluxo + Escopo Let's talk about...that? x = { prop: "Some Prop", fn: function }
65. Fluxo + Escopo Let's talk about...that? Após 2 segundos: { prop: "Some Prop", fn: function }
66. Fluxo + Escopo Let's talk about this...later
67. Fluxo + Escopo Let's talk about this...later Arrow Functions
68. Fluxo + Escopo Let's talk about this...later x = { prop: "Some Prop", fn: function }
69. Fluxo + Escopo Let's talk about this...later Após 2 segundos: { prop: "Some Prop", fn: function }
70. Arrow Functions
71. Arrow Functions
72. Arrow Functions
73. Arrow Functions
74. Arrow Functions
75. Lidando com arguments
76. Argumentos arguments não são Arrays
77. Argumentos arguments não são Arrays
78. Argumentos arguments não são Arrays [ ].slice(); // nova array com uma fatia de [ ], indo de 0 até o final [ ].slice.call(arguments); // [ ] se torna arguments
79. Argumentos
80. Argumentos (spread operator) 1, 2, [3, 4, 5]
81. Argumentos (spread operator)
82. Function* … a new (generators) spark
83. Function* … a new (generators) spark sparkle
84. Function* … a new (generators) spark sparkle retorna um Iterator
85. Function* … a new (generators) spark sparkle retorna um Iterator yield
86. Function* … a new (generators) spark // 0
87. Function* … a new (generators) spark // 0 // 1
88. Function* … a new (generators) spark // 0 // 1 // 2
89. Function* … a new (generators) spark // 0 // 1 // 2 // 3
90. Function* … a new (generators) spark // 0 // 1 // 2 // 3 // 4
91. Mais leituras e ES7(20…) Promises Async Functions Await ES7::bind
93. @felipeNMoura fb.com/felipenmoura http://felipenmoura.com/