ES6 and Beyond pdf

Já faz um tempo que a ES6 foi lançada, porém muitas vezes esquecemos ou não sabemos em que momentos usar as funcionalidades que existem na especificação, ou até mesmo por costume de usar a forma antiga, nesta apresentação mostraremos com exemplos práticos as principais funcionalidades implementadas nas versões do ES6, ES7, ES8 e ES9.

Transcript

1. and Beyond Simone Amorim Talita Oliveira ES6
2. <Hello /> Simone Amorim Desenvolvedora Talita Oliveira Desenvolvedora
3. ES Versions!!! ES2015 - ES6 ⭐ ES2016 - ES7 ES2017 - ES8 ES2018 - ES9
4. What is TC39?
5. The ES9 ⭐ The ES6 • let and const • Arrow Functions • Template Literals • Arrays (map, filter and reducer) • Arrays (from, keys, values, entries and find) • The spread operator • The rest parameter • Destructuring assignments • Default parameters
6. The ES6: Variables - let The main difference is that the scope of a var variable is the entire enclosing function. var text = 'foo'; var text = 'bar'; // No problem, `text` is replaced.
7. The ES6: Variables - let The main difference is that the scope of a var variable is the entire enclosing function. let text = 'foo'; let text = 'bar'; // SyntaxError: Identifier 'me' has already been declared.
8. The ES6: Variables - let The main difference is that the scope of a var variable is the entire enclosing function. function test(num) { var x = 1; if (num === 1) { var x = 2; console.log(x) // 2 } console.log(x) // 2 } The same variable.
9. The ES6: Variables - let The main difference is that the scope of a var variable is the entire enclosing function. function test(num) { let x = 1; if (num === 1) { let x = 2; console.log(x) // 2 } console.log(x) // 1 } The new variable.
10. The ES6: Variables - const const text = 10; // 10 const text = 20; // SyntaxError: Identifier ‘text' has already been declared The ES6: Variables - const When we initialize a constant we can’t re-declare it.
11. The ES6: Variables - const const text = 10; // 10 text = 20; // TypeError: Assignment to constant variable. The ES6: Variables - const When we initialize a constant we can’t update its value.
12. The ES6: Variables - const const arr = [10, 20]; arr.push(30)//[10, 20, 30] arr = [20, 50]; // TypeError: Assignment to constant variable. The ES6: Variables - const Arrays are stored by reference. Hence, although the binding is immutable, the values are not.
13. // ES5 var mult = function(x, y){ return x * y; } The ES6: Arrow Functions Basic Syntax with Multiple Parameters.
14. // ES6 const mult =(x, y) => { return x * y; } The ES6: Arrow Functions Basic Syntax with Multiple Parameters.
15. // ES6 const mult =(x, y) => x * y; The ES6: Arrow Functions Curly brackets aren’t required if only one expression is present.
16. // ES6 const mult = x => x; The ES6: Arrow Functions Basic Syntax with One Parameter
17. // ES6 const mult = () => 'Hello'; The ES6: Arrow Functions No Parameters
18. const name = `JSDay`; The ES6: Template Literals A template literal is a new kind of string literal.
19. // ES6 const message = `Hello I’m at JSDay `; The ES6: Template Literals We can span multiple lines and interpolate expressions.
20. // ES6 const message = `Hello I’m at ${name} `; The ES6: Template Literals We can span multiple lines and interpolate expressions.
21. const names = ['Raira','João','Ana'] const msgs = names.map(n => `Hello ${n}`) // ["Hello Raira", "Hello João", "Hello Ana"] The ES6: Arrays: map() Creates a new array by manipulating the values in another array.
22. const names = ['Raira','João','Ana'] const msgs = names.filter(n => n === `Ana`) // ["Ana"] The ES6: Arrays: filter() Creates a new array with all elements that pass the test implemented by the provided function.
23. const numbers = [1, 2, 3, 4] const even = numbers.filter(n => n % 2 === 0) // [2, 4] The ES6: Arrays: filter() Creates a new array with all elements that pass the test implemented by the provided function.
24. const numbers = [1, 2, 3, 4] const total = numbers .reduce((acc, n) => acc + n, 0) // 10 The ES6: Arrays: reduce() Executes a reducer function (that you provide) on each member of the array resulting in a single output value.
25. const msg = `Hello JSDay`; const msgArray = Array.from(msg) //["H", "e", "l", "l", "o", " ", “J”, “S", "D", "a", "y"] The ES6: Array.from() This is a static method that creates an array based on another array or string.
26. const numbers = [1, 2, 3] const mult = Array.from( numbers, n => n * 2) //[2, 4, 6] The ES6: Array.from() This is a static method that creates an array based on another array or string.
27. const numbers = [1, 2, 3] const keys = Array.from(numbers.keys()) //[0, 1, 2] The ES6: Array.from(arr.keys()) This method returns a new Array that contains the keys for each index in the array.
28. const names = ['Raira', 'Ana', 'Kath'] const values = Array.from(names.values()) //["Raira", “João”, "Ana"] The ES6: Array.from(arr.values()) This method returns a new Array that contains the values for each index in the array.
29. The ES6: Array.from(arr.entries()) This method returns a new Array that contains the keys and values for each index in the array. const names = ['Raira', 'Ana', 'Kath'] const entries = Array.from(names.entries()) //[[0, “Raira”], [1, “João”], [2, ”Ana”]]
30. The ES6: Array.find()) const names = [1, 2, 3, 4] numbers.find(n => n > 2) // 3 numbers.find(n => n >= 2) // 2 numbers.find(n => n % 2 === 0) // 2 Returns the first array element for which the callback predicate returns true.
31. const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] const arr3 = […arr1, …arr2] const arr4 = […arr3, 7, 8] // arr3: [1, 2, 3, 4, 5, 6] // arr4: [1, 2, 3, 4, 5, 6, 7, 8] The ES6: The spread operator (...) Does essentially what it says on the tin — it spreads something iterable into a list.
32. const msg = `Hello JSDay` const arrMesg = […msg] // ["H", "e", "l", "l", "o", " ", "J", "S", "D", "a", "y"] The ES6: The spread operator (...) - String to Array
33. const numbers =((…n) => n) numbers =(1, 2)// [1, 2] numbers =(1, 2, 3)// [1, 2, 3] numbers =(1, 2, 3, 4)// [1, 2, 3, 4] The ES6: rest parameters (...) The rest parameter syntax allows us to represent an indefinite number of arguments as an array.
34. const arr = [1, 2, 3] const [first, second, third] = arr // first: 1 // second: 2 // third: 3 The ES6: Destructuring assignments Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.
35. const mult =(a, b = 2) => a * b mult(5)// 10 mult(5, 10)// 50 The ES6: Default parameters Allow named parameters to be initialized with default values if no value or undefined is passed.
36. The ES9 The ES7 • Array.prototype.includes() • Exponentiation Operator
37. The ES7: Includes The "includes" function check in array if contains any element. It's a more readable syntax than ".indexOf()"
38. The ES7: Includes The "includes" function check in array if contains any element. It's a more readable syntax than ".indexOf()"
39. The ES7: Exponentiation operator Is the same as "Math.pow()", but don't need to use the library Math
40. The ES9 The ES8 • String padding • Object.values() • Object.entries() • getOwnPropertyDescriptors() • Trailing commas
41. When you need a string to reach a specific length. There are two ways to add characters to reach the length: padStart() and padEnd() The ES8: String Padding
42. The ES8: padStart (String padding) Add characters before the original string
43. Add characters after the original string The ES8: padEnd (String padding)
44. The ES8: String padding (bonus round)
45. The ES8: Object.values() Returns an array with all values of the Object's properties
46. The ES8: Object.entries() Returns an array with all property and values of the object as an array of [key, value] pairs
47. The ES8: Trailing Commas It's a minor update that allows you to leave a comma after the last parameter on a function or the last property on objects
48. The ES8: Trailing Commas It's a minor update that allows you to leave a comma after the last parameter on a function or the last property on objects
49. The ES8: Trailing Commas It's a minor update that allows you to leave a comma after the last parameter on a function or the last property on objects
50. The ES9 The ES9 • Rest/Spread Properties • Asynchronous iteration • Promise.prototype.finally() • Regular Expression improvements
51. The ES9: Rest properties for Objects Using the REST operator "..." to extract properties from an object
52. The ES9: Spread properties for Objects Using the SPREAD operator "..." to create new objects with properties of the object passed after the spread operator.
53. The ES9: Asynchronous Iteration Specifies an asynchronous version of the "for-"loop. With the "for-await-of" loop allows you to iterate promises and wait until all them is resolved to return on order
54. The ES9: Asynchronous Iteration Let's imagine that we have 4 promises that they will be resolved in different times each one
55. The ES9: Asynchronous Iteration And I want to iterate all of them, but for any reason I need the results on the order that I specified.
56. The ES9: Promise.prototype.finally() Is always executed. Allow to execute some code if the promise is successful or not successful. It's similar to finally {} on synchronous code (try/catch/finally)
57. The ES9: RegExp Lookbehind Assertions Ways to match a string with another substring that is followed by or precedes by another specific string. The new feature is the "lookbehind"
58. The ES9: RegExp Lookbehind Assertions Ways to match a string with another substring that is followed by or precedes by another specific string. The new feature is the "lookbehind"
59. The ES9: RegExp Unicode Property Escapes Using this feature you can match characters by specifying the name of the set of characters. Using \p{} and negation using \P{}
60. The ES9: RegExp Unicode Property Escapes Using this feature you can match characters by specifying the name of the set of characters. Using \p{} and negation using \P{}
61. The ES9: s/(dotall) flag for Regular expression The new /s flag starts to match really all chars, including new lines.
62. The ES9: RegExp Named Group Captures The proposed feature is about identifying capture groups via names.
63. The ES9: RegExp Named Group Captures The proposed feature is about identifying capture groups via names.
64. Vem Trabalhar com a gente!!!
65. References ❏ https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/ ❏ https://codeburst.io/a-simple-guide-to-destructuring-and-es6-spread-operator- e02212af5831 ❏ https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb ❏ https://webapplog.com/es6/ ❏ https://flaviocopes.com/es2018 ❏ https://tc39.github.io/ecma262/ ❏ http://2ality.com ❏
66. @liitacherry Thank you folks! @talitaoliveira https://talitaoliveira.github.io/ @simoneas02 @samorim02 simoneas02.github.com