Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Funções em JavaScript

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.

More Decks by Felipe Nascimento de Moura

Other Decks in Technology

Transcript

  1. Funções em JavaScript
    fluxo, escopo e sintaxe
    @felipenmoura

    View full-size slide

  2. Who Am I
    ~10 anos de desenvolvimento
    Apaixonado pela
    Fundador/organizador da BrazilJS
    e RSJS e FrontInPoa
    web

    View full-size slide

  3. Who Am I
    @felipenmoura
    fb.com/
    http://felipenmoura.com
    felipenmoura

    View full-size slide

  4. Começamos pelo escopo

    View full-size slide

  5. Começamos pelo
    - Contexto da execução
    - Pode ser global, local ou de eval
    - Tem acesso ao escopo externo
    escopo

    View full-size slide

  6. GLOBAL
    Local 1
    Local 2

    View full-size slide

  7. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 2.1
    Local 2.2

    View full-size slide

  8. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 1.1.1
    Local 2.1
    Local 2.2

    View full-size slide

  9. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 1.1.1
    Local 2.1
    Local 2.2

    View full-size slide

  10. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 1.1.1
    Local 2.1
    Local 2.2

    View full-size slide

  11. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 1.1.1
    Local 2.1
    Local 2.2

    View full-size slide

  12. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 1.1.1
    Local 2.1
    Local 2.2

    View full-size slide

  13. GLOBAL
    Local 1
    Local 2
    Local 1.1
    Local 1.1.1
    Local 2.1
    Local 2.2

    View full-size slide

  14. GLOBAL
    Local 1
    Local 1.1
    Local 1.1.1

    View full-size slide

  15. Vamos falar de fluxo

    View full-size slide

  16. - Ordem da execução
    - Existem controles para o fluxo
    Vamos falar de fluxo

    View full-size slide

  17. Fluxo
    Cada aba do navegador tem
    a sua main thread.
    Nela, é onde tudo acontece:
    JS, repaint, redraw...

    View full-size slide

  18. Controles de Fluxo
    if/else
    switch
    for
    while
    try
    function calls

    View full-size slide

  19. Fluxo / Hoisting
    Iça as variáveis

    View full-size slide

  20. Fluxo / Lazy comparing

    View full-size slide

  21. Fluxo / Lazy comparing
    Caminho mais
    fácil

    View full-size slide

  22. Quebrando o fluxo
    setTimeout / setInterval

    View full-size slide

  23. Quebrando o fluxo
    setTimeout / setInterval
    O setInterval vai "furar a fila"!

    View full-size slide

  24. Quebrando o fluxo
    setTimeout / setInterval
    O setTimeout e a 5ª execução!

    View full-size slide

  25. Quebrando o fluxo
    setTimeout

    View full-size slide

  26. setImmediate
    Quebrando o fluxo

    View full-size slide

  27. XMLHTTPRequest
    WebWorker (ambiente controlado)
    Eventos do DOM
    WebSockets
    Quebrando o fluxo

    View full-size slide

  28. Funções por Definição vs
    Token de function no início de um statement
    Definição Instrução

    View full-size slide

  29. Funções por Definição vs
    Caso contrário, é uma instrução (sem hoisting)
    Definição Instrução

    View full-size slide

  30. Funções por Definição vs
    Caso contrário, é uma instrução (sem hoisting)
    Definição Instrução

    View full-size slide

  31. Funções por Definição vs
    Caso contrário, é uma instrução (sem hoisting)
    Definição Instrução

    View full-size slide

  32. Anonima...ou não

    View full-size slide

  33. Anonima...ou não

    View full-size slide

  34. Anonima...ou não

    View full-size slide

  35. Anonima...ou não

    View full-size slide

  36. Fluxo + Escopo
    Let's talk about this!

    View full-size slide

  37. Fluxo + Escopo
    Let's talk about this!
    Window

    View full-size slide

  38. Fluxo + Escopo
    Let's talk about this!

    View full-size slide

  39. Fluxo + Escopo
    Let's talk about this!
    { x: 1 }

    View full-size slide

  40. Fluxo + Escopo
    Let's talk about this!

    View full-size slide

  41. Fluxo + Escopo
    Let's talk about this!
    { prop: "Some Prop", fn: function }

    View full-size slide

  42. call, apply e bind

    View full-size slide

  43. call, apply e ...

    View full-size slide

  44. call, apply e ...

    View full-size slide

  45. call, apply e ...

    View full-size slide

  46. call, apply e ...

    View full-size slide

  47. call, apply e ...

    View full-size slide

  48. Fluxo + Escopo
    Let's talk about this...later

    View full-size slide

  49. Fluxo + Escopo
    Let's talk about this...later
    x = { prop: "Some Prop", fn: function }

    View full-size slide

  50. Fluxo + Escopo
    Let's talk about this...later
    Após 2 segundos:
    Window

    View full-size slide

  51. Fluxo + Escopo
    Let's talk about...that?

    View full-size slide

  52. Fluxo + Escopo
    Let's talk about...that?
    guardamos o this

    View full-size slide

  53. Fluxo + Escopo
    Let's talk about...that?
    x = { prop: "Some Prop", fn: function }

    View full-size slide

  54. Fluxo + Escopo
    Let's talk about...that?
    Após 2 segundos:
    { prop: "Some Prop", fn: function }

    View full-size slide

  55. Fluxo + Escopo
    Let's talk about this...later

    View full-size slide

  56. Fluxo + Escopo
    Let's talk about this...later
    Arrow Functions

    View full-size slide

  57. Fluxo + Escopo
    Let's talk about this...later
    x = { prop: "Some Prop", fn: function }

    View full-size slide

  58. Fluxo + Escopo
    Let's talk about this...later
    Após 2 segundos:
    { prop: "Some Prop", fn: function }

    View full-size slide

  59. Arrow Functions

    View full-size slide

  60. Arrow Functions

    View full-size slide

  61. Arrow Functions

    View full-size slide

  62. Arrow Functions

    View full-size slide

  63. Arrow Functions

    View full-size slide

  64. Lidando com arguments

    View full-size slide

  65. Argumentos
    arguments não são Arrays

    View full-size slide

  66. Argumentos
    arguments não são Arrays

    View full-size slide

  67. 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

    View full-size slide

  68. Argumentos (spread operator)
    1, 2, [3, 4, 5]

    View full-size slide

  69. Argumentos (spread operator)

    View full-size slide

  70. Function* … a new (generators)
    spark

    View full-size slide

  71. Function* … a new (generators)
    spark
    sparkle

    View full-size slide

  72. Function* … a new (generators)
    spark
    sparkle
    retorna um Iterator

    View full-size slide

  73. Function* … a new (generators)
    spark
    sparkle
    retorna um Iterator
    yield

    View full-size slide

  74. Function* … a new (generators)
    spark
    // 0

    View full-size slide

  75. Function* … a new (generators)
    spark
    // 0
    // 1

    View full-size slide

  76. Function* … a new (generators)
    spark
    // 0
    // 1
    // 2

    View full-size slide

  77. Function* … a new (generators)
    spark
    // 0
    // 1
    // 2
    // 3

    View full-size slide

  78. Function* … a new (generators)
    spark
    // 0
    // 1
    // 2
    // 3
    // 4

    View full-size slide

  79. Mais leituras e ES7(20…)
    Promises
    Async Functions
    Await
    ES7::bind

    View full-size slide

  80. @felipeNMoura
    fb.com/felipenmoura
    http://felipenmoura.com/

    View full-size slide