ES6 and Beyond pdf - Speaker Deck

Slide 1

Slide 1 text

and Beyond Simone Amorim Talita Oliveira ES6

Slide 2

Slide 2 text

Simone Amorim Desenvolvedora Talita Oliveira Desenvolvedora

Slide 3

Slide 3 text

ES Versions!!! ES2015 - ES6 ⭐ ES2016 - ES7 ES2017 - ES8 ES2018 - ES9

Slide 4

Slide 4 text

What is TC39?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

// ES5 var mult = function(x, y){ return x * y; } The ES6: Arrow Functions Basic Syntax with Multiple Parameters.

Slide 14

Slide 14 text

// ES6 const mult =(x, y) => { return x * y; } The ES6: Arrow Functions Basic Syntax with Multiple Parameters.

Slide 15

Slide 15 text

// ES6 const mult =(x, y) => x * y; The ES6: Arrow Functions Curly brackets aren’t required if only one expression is present.

Slide 16

Slide 16 text

// ES6 const mult = x => x; The ES6: Arrow Functions Basic Syntax with One Parameter

Slide 17

Slide 17 text

// ES6 const mult = () => 'Hello'; The ES6: Arrow Functions No Parameters

Slide 18

Slide 18 text

const name = `JSDay`; The ES6: Template Literals A template literal is a new kind of string literal.

Slide 19

Slide 19 text

// ES6 const message = `Hello I’m at JSDay `; The ES6: Template Literals We can span multiple lines and interpolate expressions.

Slide 20

Slide 20 text

// ES6 const message = `Hello I’m at ${name} `; The ES6: Template Literals We can span multiple lines and interpolate expressions.

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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”]]

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

The ES9 The ES7 ● Array.prototype.includes() ● Exponentiation Operator

Slide 37

Slide 37 text

The ES7: Includes The "includes" function check in array if contains any element. It's a more readable syntax than ".indexOf()"

Slide 38

Slide 38 text

The ES7: Includes The "includes" function check in array if contains any element. It's a more readable syntax than ".indexOf()"

Slide 39

Slide 39 text

The ES7: Exponentiation operator Is the same as "Math.pow()", but don't need to use the library Math

Slide 40

Slide 40 text

The ES9 The ES8 ● String padding ● Object.values() ● Object.entries() ● getOwnPropertyDescriptors() ● Trailing commas

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

The ES8: padStart (String padding) Add characters before the original string

Slide 43

Slide 43 text

Add characters after the original string The ES8: padEnd (String padding)

Slide 44

Slide 44 text

The ES8: String padding (bonus round)

Slide 45

Slide 45 text

The ES8: Object.values() Returns an array with all values of the Object's properties

Slide 46

Slide 46 text

The ES8: Object.entries() Returns an array with all property and values of the object as an array of [key, value] pairs

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

The ES9 The ES9 ● Rest/Spread Properties ● Asynchronous iteration ● Promise.prototype.finally() ● Regular Expression improvements

Slide 51

Slide 51 text

The ES9: Rest properties for Objects Using the REST operator "..." to extract properties from an object

Slide 52

Slide 52 text

The ES9: Spread properties for Objects Using the SPREAD operator "..." to create new objects with properties of the object passed after the spread operator.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

The ES9: Asynchronous Iteration Let's imagine that we have 4 promises that they will be resolved in different times each one

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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)

Slide 57

Slide 57 text

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"

Slide 58

Slide 58 text

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"

Slide 59

Slide 59 text

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{}

Slide 60

Slide 60 text

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{}

Slide 61

Slide 61 text

The ES9: s/(dotall) flag for Regular expression The new /s flag starts to match really all chars, including new lines.

Slide 62

Slide 62 text

The ES9: RegExp Named Group Captures The proposed feature is about identifying capture groups via names.

Slide 63

Slide 63 text

The ES9: RegExp Named Group Captures The proposed feature is about identifying capture groups via names.

Slide 64

Slide 64 text

Vem Trabalhar com a gente!!!

Slide 65

Slide 65 text

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 ❏

Slide 66

Slide 66 text

@liitacherry Thank you folks! @talitaoliveira https://talitaoliveira.github.io/ @simoneas02 @samorim02 simoneas02.github.com