Tweet
Tweet

Slide 1

Slide 1 text

JavaScript as partes essenciais

Slide 2

Slide 2 text

Talysson Web dev @ Codeminer42 beacons.page/talyssonoc

Slide 3

Slide 3 text

O que significa “essencial”? - A comunidade JS é bastante ativa - Várias ferramentas, bibliotecas, frameworks - É comum focarmos nas ferramentas, e esquecermos a base: a linguagem - O essencial é tudo da linguagem que vai te perseguir não interessa qual ferramenta use - Não saber o essencial significa não usar todas as vantagens oferecidas pela linguagem 3

Slide 4

Slide 4 text

4 High-order functions e Callbacks

Slide 5

Slide 5 text

5 High-order functions e Callbacks - Em JS, funções são first-class citizens - Funções são tratadas como qualquer outra variável - Passadas como argumento e também retornadas - Uma função passada como argumento é chamada de callback - Um callback só é invocado quando a função que o recebe decide chamá-lo

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

10

Slide 11

Slide 11 text

11 Links sobre - https://developer.mozilla.org/en-US/docs/Glossar y/First-class_Function - https://developer.mozilla.org/en-US/docs/Glossar y/Callback_function - https://eloquentjavascript.net/05_higher_o rder.html

Slide 12

Slide 12 text

Escopo e closures 12

Slide 13

Slide 13 text

13 Escopo e closures - O escopo de uma função é seu contexto atual - Composto por valores acessíveis naquele ponto - Este escopo inclui tanto valores dentro da própria função quanto valores do escopo superior ao atual - Uma função que acessa valores de um escopo pertencente à outra função é chamada de closure - Closures permitem que função “carreguem valores”

Slide 14

Slide 14 text

14

Slide 15

Slide 15 text

15

Slide 16

Slide 16 text

16 Links sobre - https://developer.mozilla.org/en-US/docs/Glossar y/Scope - https://developer.mozilla.org/en-US/docs/W eb/JavaScript/Closures - https://eloquentjavascript.net/03_functions .html#h_hOd+yVxaku

Slide 17

Slide 17 text

Arrow functions, Functions e this 17

Slide 18

Slide 18 text

18 Arrow functions, Functions e this - O JS possui 2 tipos principais de funções - Arrow functions foram adicionadas mais recentemente à linguagem - A diferença das duas não se restringe à sintaxe - Funções possuem uma variável especial: this - Conseguimos manipular o valor de this - Mas, arrow functions trabalham diferente com o this

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

20

Slide 21

Slide 21 text

21

Slide 22

Slide 22 text

22

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

27

Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

29

Slide 30

Slide 30 text

30

Slide 31

Slide 31 text

31

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

35 Links sobre - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/F unctions - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ce/Functions/Arrow_functions - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ce/Operators/this - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ce/Global_Objects/Function/bind - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ce/Global_Objects/Function/Call - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ce/Global_Objects/Function/Apply

Slide 36

Slide 36 text

Prototype 36

Slide 37

Slide 37 text

37 Prototype - Prototype é o modelo de objetos usado pelo JS - Podemos dizer que JS não tem realmente classes, a sintaxe class é apenas um atalho para prototypes - O prototype de um objeto define quais métodos e propriedades ele terá quando instanciado - Tipos primitivos também acessam prototypes - Eles podem ser modificados depois de definidos, e isso permite uma grande funcionalidade: polyfill

Slide 38

Slide 38 text

38

Slide 39

Slide 39 text

39

Slide 40

Slide 40 text

40

Slide 41

Slide 41 text

41

Slide 42

Slide 42 text

42

Slide 43

Slide 43 text

43

Slide 44

Slide 44 text

44

Slide 45

Slide 45 text

45 Links sobre - https://developer.mozilla.org/en-US/docs/Learn/J avaScript/Objects/Object_prototypes - https://github.com/getify/You-Dont-Know-JS /blob/1st-ed/this%20&%20object%20prototy pes/README.md#you-dont-know-js-this--obj ect-prototypes - https://eloquentjavascript.net/06_object.ht ml#h_SumMlRB7yn

Slide 46

Slide 46 text

Promises e async/await 46

Slide 47

Slide 47 text

47 Promises e async/await - Promises são objetos que representam o resultado (sucesso/falha) eventual de uma operação assíncrona - Surgiram como uma melhor forma de organizar o uso de callbacks aninhados para assincronia - Não é possível "tirar o valor" de uma promise - Acessamos este resultado através de um callback - async/await é uma feature baseada em promises que melhora a ergonomia das promises

Slide 48

Slide 48 text

48

Slide 49

Slide 49 text

49

Slide 50

Slide 50 text

50

Slide 51

Slide 51 text

51

Slide 52

Slide 52 text

52

Slide 53

Slide 53 text

53

Slide 54

Slide 54 text

54

Slide 55

Slide 55 text

55

Slide 56

Slide 56 text

56 https://gist.github.com/talyssonoc/8cac925c809d93e915ed404695e0666b Desafio de promises

Slide 57

Slide 57 text

57 Links sobre - https://developer.mozilla.org/en-US/docs/Web/Ja vaScript/Reference/Global_Objects/Promise - https://developer.mozilla.org/en-US/docs/W eb/JavaScript/Reference/Statements/async _function

Slide 58

Slide 58 text

Obrigado! @talyssonoc beacons.page/talyssonoc