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