Talk - let, const & arrow functions

Talk para o capítulo de javascript da Concrete SP falando sobre novas funcionalidades do ES6 que melhoram a forma de trabalhar com escopo.

Transcript

1. const, let & arrow functions
2. const & let
3. var & function scope
4. for (var i = 0; i < 10; i++) { console.log(i) } console.log('out of loop', i)
5. var i = 1000 for (var i = 0; i < 5; i++) { console.log(i) } console.log('out of loop', i)
7. var i = 1000 function loop() { for (var i = 0; i < 5; i++) { console.log(i) } } loop() console.log('out of loop', i) // 1000
8. var i = 1000 ;(function() { for (var i = 0; i < 5; i++) { console.log(i) } })() console.log('out of loop', i) // 1000
9. block scope
10. let i = 1000 for (let i = 0; i < 5; i++) { console.log(i) } console.log('out of loop', i) // 1000
11. for (let i = 0; i < 5; i++) { console.log(i) } console.log('out of loop', i) /* ReferenceError: i is not defined at Object.<anonymous> (loop.js:4:28) */
12. let message = '(⌐□_□)' { let message = 'Hello JS chapter' console.log(message) } console.log(message) // Hello JS chapter // (⌐□_□)
13. hoisting
14. var a = 1 function foo() { console.log(a) var a = 2 console.log(a) } foo() console.log(a)
16. var a = 1 function foo() { console.log(a) var a = 2 console.log(a) } foo() console.log(a) // original code
17. var a function foo() { var a console.log(a) a = 2 console.log(a) } a = 1 foo() console.log(a) // hoisted code
18. let a = 1 function foo() { console.log(a) let a = 2 console.log(a) } foo() console.log(a) // using let
20. let a = 1 function foo() { console.log(a) let b = 2 console.log(b) } foo() console.log(a) // expected
21. Redeclaration
22. var a = '(◕‿◕)' // to many code here... var a = '(⌐▪_▪)' console.log(a) // (⌐▪_▪)
23. let a = '(◕‿◕)' // to many code here... let a = '(⌐▪_▪)' console.log(a) /* ./redeclaration.js:3 let a = '(⌐▪_▪)' ^ SyntaxError: Identifier 'a' has already been declared */
24. const???
25. “Em javascrip Tipos Primitivos string, number, boolean, null e undefined, são imutáveis, o que significa que, uma vez criados, eles não podem ser modificados.”
26. const value /* const value ^^^^^ SyntaxError: Missing initializer in const declaration */
27. const face = '(⌐▪_▪)' face = '(◕‿◕)' /* face = '(◕‿◕)' ^ TypeError: Assignment to constant variable. */
28. const memes = [ '(⌐▪_▪)', '｡◕‿◕｡', '(⊙_☉)' ] console.log(memes[1]) //｡◕‿◕｡ memes[1] = '⊙﹏⊙' console.log(memes[1]) // ⊙﹏⊙
29. const memes = ['(⌐▪_▪)', '(⊙_☉)', '｡◕‿◕｡'] console.log(memes[3]) //undefined memes.push('⊙﹏⊙') console.log(memes[3]) // ⊙﹏⊙
30. const emotions = { angry: '(ò_ó)' } emotions.angry = '(╬ Ò ‸ Ó)' emotions.happy = '(^_^)' console.log(emotions) // { angry: '(╬ Ò ‸ Ó), happy: '(^_^)' }
31. arrow functions
32. syntax
33. const increment = function(x) { return x + 1 }
34. const increment = function(x) { return x + 1 } const increment = (x) => { return x + 1 }
35. const increment = function(x) { return x + 1 } const increment = (x) => { return x + 1 } const increment = (x) => x + 1
36. const increment = function(x) { return x + 1 } const increment = (x) => { return x + 1 } const increment = (x) => x + 1 const increment = x => x + 1
37. lexical this
38. function Person() { this.age = 0 setInterval(function() { console.log('this.age:', this.age) this.age++ }, 1000) } const person = new Person()
39. const person = new Person() setInterval(function() { console.log('person.age:', person.age) }, 1000)
41. function Person() { var self = this self.age = 0 setInterval(function() { console.log('self.age:', self.age) self.age++ }, 1000) }
42. function Person() { this.age = 0 setInterval(() => { console.log('this.age:', this.age) this.age++ }, 1000) }
44. const scope = { face: '(*_*)' } const f = function() { console.log(this) } f() // window || global || undefined f.call(scope) // { face: '(*_*)' } f.apply(scope) // { face: '(*_*)' } f.bind(scope)() // { face: '(*_*)' } scope.f = f scope.f() // { face: '(*_*)', f: [Function: f] }
45. const scope = { face: '(*_*)' } const f = () => console.log(this) f() // {} f.call(scope) // {} f.apply(scope) // {} f.bind(scope)() // {} scope.f = f scope.f() // {}
46. function.name
47. function f() {} console.log(f.name) // f const g = function other() {} console.log(g.name) // other const j = function() {} console.log(j.name) // j const k = () => {} console.log(k.name) // k
48. const x = () => () => {} const x = function() { return () => {} } const y = x() console.log(y.name === '') // true
49. Valeu!!! (＾‿＾)／
50. referências => mdn: let => mdn: const => mdn: Arrow functions => loopinfinito: Hoisting e escopo => loopinfinito: ECMAScript 6 Arrow Function => BrazilJS: Diferenças entre “Valor” e “Referência” => funfunfunction: var, let and const - What, why and how => funfunfunction: Arrow functions in JavaScript - What, Why and How