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.

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

  16. None
  17. None
  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

  92. None
  93. @felipeNMoura fb.com/felipenmoura http://felipenmoura.com/