O documento apresenta as principais evoluções da linguagem Javascript na versão ECMAScript 6, incluindo novas funcionalidades como constants, arrow functions, template literals, classes, generators, promises e outras. O objetivo é expor os novos recursos disponíveis e demonstrar exemplos de sintaxe e utilização.

1. ECMAScript 6
As evoluções na plataforma Javascript.

2. Contextualização
● O intuito desta apresentação é expor alguns dos recursos que estão disponíveis na
nova versão da linguagem;
● Demonstrar exemplo de sintaxe e utilização das novas features;
● Apresentar novos conceitos inseridos na linguagem;

3. ECMAScript 6 - Visão geral
1. Constants
2. Scoping
3. Arrow Functions
4. Extended Parameter
5. Template Literals
6. Extended Literals
7. Enhanced Object Properties
8. Destructuring Assignment
9. Modules
10. Classes
11. Iterators
12. Generators
13. Map/Set E Weak..
14. Typed Arrays
15. New Methods
16. Internationazation & Localization
17. Meta-Programming
18. Promises

4. Code: Output:
Constants
Variáveis imutáveis, recebem um valor na inicialização e esse valor permanece até o
final de sua vida útil.
● Seu escopo equivale ao let

5. Constants
Equivalente no ES5 (ESMAScript 5).
Code:

6. Scoping
Criação de novos escopos com “{}”, isso permite que novos escopos sejam criados de
maneira mais fácil. No ES5 (ESMAScript 5) isso é era possível através da criação de
funções.
Code: Output:

7. Scoping
Equivalente no ES5 (ESMAScript 5).
Code:

8. Scoping
Let
Novo modificador que define um escopo local para variável, e ao contrário do
modificador “var” este novo modificador não participa do hoisting.
Code: Output:

9. Arrow Functions
● Muito semelhante ao Lambda do Java, essa funcionalidade tem se tornado muito
comum na maiorias das linguagens modernas. Ela tem o principio de tornar a
criação de código menos verbosa.
● Utilização mais intuitiva do this, com a implementação do this léxico na
linguagem, agora o this fica amarando ao contexto e não mais a onde a função é
chamada.

10. Arrow Functions
Code: Output:

11. Arrow Functions
Equivalente no ES5 (ESMAScript 5).
Code:

12. Extended Parameter
Default Parameter Values
Dá a possibilidade de definição de um valor padrão para os parâmetros de um método
Code: Output:

13. Extended Parameter
Equivalente no ES5 (ESMAScript 5).
Code:

14. Extended Parameter
Rest Parameter
Um opção que permite receber um numero variado de argumentos e associando-os a
uma referencia.
Code: Output:

15. Extended Parameter
Equivalente no ES5 (ESMAScript 5).
Code:

16. Extended Parameter
Spread Operator
Um opção que permite receber um numero variado de argumentos e associando-os a
uma referencia.
Code: Output:

17. Não existe uma equivalência no ES5 (ESMAScript 5). Mas para ilustrar qual a
diferença se usar o operador, observe o exemplo abaixo.
Code: Output:
Extended Parameter

18. Template Literals
String Interpolation
Interpolação de expressões com variáveis dentro de um string, tornando mais fácil a do
seu conteúdo. Para criar o template deve-se usar a crase “ ` ”.
Code:
Output:

19. Template Literals
Tagged template literals
Funciona parecido com o spread operator, passando como parâmetro para a tag
function a string template e um rest parameter com as variáveis dinâmicas.
Code:

20. Template Literals
Tagged template literals
Funciona parecido com o spread operator, passando como parâmetro para a tag
function a string template e um rest parameter com as variáveis dinâmicas.
Output:

21. ● Binary & Octal Literal
● Unicode String & RegExp Literal
Code:
ES5
Extended Literals

22. Enhanced Object Properties
Property Shorthand
Associação implícita por nome de propriedades.
Code:
Output:

23. Enhanced Object Properties
Equivalente no ES5 (ESMAScript 5).
Code:

24. Enhanced Object Properties
Computed Property Names
Declaração de nome de propriedade através de expressão.
Code:
Output:

25. Enhanced Object Properties
Equivalente no ES5 (ESMAScript 5).
Code:

26. Enhanced Object Properties
Method Properties
Abreviação na declaração de métodos como propriedades.
Code:
Output:

27. Enhanced Object Properties
Equivalente no ES5 (ESMAScript 5).
Code:

28. Destructuring Assignment
Array Matching
De composição de array em variáveis.
Code:
Output:

29. Destructuring Assignment
Equivalente no ES5 (ESMAScript 5).
Code:

30. Destructuring Assignment
Object Matching, Shorthand Notation
De composição de propriedades de objetos em variáveis. Baseada em assignação por
nome.
Code:
Output:

31. Destructuring Assignment
Equivalente no ES5 (ESMAScript 5).
Code:

32. Destructuring Assignment
Object Matching, Deep Matching
Permite mapear a assignação desejada.
Code:
Output:

33. Destructuring Assignment
Equivalente no ES5 (ESMAScript 5).
Code:

34. Destructuring Assignment
Parameter Context Matching
Permite mapear a assignação desejada quando se refere a parâmetros de functions.
Code:
Output:

35. Destructuring Assignment
Equivalente no ES5 (ESMAScript 5).
Code:

36. Destructuring Assignment
Fail-Soft Destructuring
Manuseio ante falhas na assignação.
Code:
Output:

37. Modules
Suporte nativo a criação de módulos. Isso é uma importante ferramenta para
organização de código, reaproveitamento e para evitar poluição do escopo global.
Code:

38. Classes
Foi adicionado uma espécie de açúcar sintático auxilia a criação de objetos
(Prototypes) para quem vem de linguagens com paradigma OO (Object-oriented)
Code:

39. Classes
Equivalente no ES5 (ESMAScript 5).
Code:

40. Iterators
Suporte a customização do comportamento de iterações, permite criar e manipular
iterações. Obrigatoriamente deve possuir um método chamado [Symbol.iterator] e
usar yield para retornar a resposta.
Code: Output:

41. Generators
Funções de controle de fluxo que gerenciam as chamadas, elas começam, param e
retornam o fluxo de execução. Sempre retorna um objeto que obedece o Iterador
Protocol ({ value, done }).
Code: Output:

42. Map/Set E Weak Map/Set
Map/Set
Estruturas de dados de mapa e conjunto.
Code: Output:

43. Map/Set E Weak Map/Set
Equivalente no ES5 (ESMAScript 5).
Code:

44. Map/Set E Weak Map/Set
Weak Map/Set
● Estruturas de dados de mapa e conjunto com fracas referências. Isso significa que
caso não haja referência para o objeto inserido ele será coletado pelo GC.
● Serve como um repositório fechado, não é possível recuperar os objetos depois de
armazenados, apenas apagá-los ou verificar se estão contidos dentro container.
Code:

45. Typed Arrays
● ArrayBuffer: um buffer binário genérico, de tamanho fixo que não pode ter seu
conteúdo alterado diretamente.
● Views: Novos objetos criados para manusear com mais eficiências que a API
Array, um typed array não passa no teste Array.isArray().
● DataView: sua função é permitir a navegação em estruturas complexas com
diferentes tipos de dados.

46. Typed Arrays

47. Typed Arrays
Code: Output:

48. New Methods
Novos métdos adicionados a APIs já existentes :
● Array Element Finding
● Object Property Assignment
● String Repeating
● String Searching
● Number Type Checking
● Number Comparison
● Number Truncation
● ...

49. New Methods
Code:

50. New Methods
Output:

51. Internationalization & Localization
● Collections
● Number
● Currency
● Date/Time

52. Internationazation & Localization
Code: Output:

53. Meta-Programming
● Proxy: Define uma espécie de hook para objeto em runtime-time level. Permite
alterar ou adicionar comportamentos ao objeto.
● Reflection: permite e facilita acesso a Metadados e Meta-operadores (dos do
Prototype).
Code: Output:

54. Promises
Novo objeto nativo usado para execução de processos assíncronos que tomam muito
tempo, baseado no conceito de promessa de uma retorno após dado processamento. A
promise possui estados (pendente, rejeitado e realizada) e ao final chama uma ação
para de sucesso ou para falha.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise

55. Promises
Code: Output:

56. Promises
Code:

57. Promises
Output:

58. Outras features
1. Symbol Type
2. Enhcaned Regular Expression
3. Promise Combination

59. Bibliografia
http://es6-features.org
http://www.2ality.com/2015/07/regexp-es6.html
https://www.infoq.com/br/presentations/ecmascript-6-novidades
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference
http://jsrocks.org/pt-br/2014/11/es6-playing-with-the-new-javascript
https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
http://www.2ality.com/2015/09/typed-arrays.html
https://github.com/mdn/promises-test/blob/gh-pages/index.html

60. Dúvidas??