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

ES6 and Beyond pdf

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.

C66863aa3cc145cf7d5ff8e1c40a7db8?s=128

Simone Amorim

December 01, 2018
Tweet

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