ES6 / ES2015 Gotchas

William Grasel

@willgmbr

Let + Const

• Escopo fechado sempre
• Restrinções estáticas
• Throw Erros
• Constantes não são imutaveis!
• De preferencia a const sempre que possível
• Evite var, ao menos que realmente saiba o que esta fazendo e por que precisa disso!

Escopo fechado sempre... MESMO

 "use strict";
 var methods = [];

 for(var i = 0; i < 10; i++){
   methods[i] = function() {
     console.log('var = ', i);
   };
 }

 methods[5]() // var = 10

Constantes podem ter valor atribuído apenas uma vez

 "use strict";

 const c = {};

 c.myNewAtt = 123;
 console.log('myconst = ', c);
 //myconst = { myNewAtt: 123 }

 c = 123;
 //TypeError: Assignment to constant variable.

Mas não são imutáveis...

Promises

• Representam uma operação única
• Podem ser assíncronas ou não...
• Uma maneira de lidar com callback hell

Evitando callback hell:

  remotedb.allDocs({  
    include_docs: true,
    attachments: true
  }).then(function (result) {
    var docs = result.rows;
    docs.forEach(function(element) {
      localdb.put(element.doc).then(function(response) {
        console.log("Pulled doc with id ",  element.doc._id);
      }).catch(function (err) {
        if (err.status == 409) {
          localdb.get(element.doc._id).then(function (resp) {
            localdb.remove(resp._id, resp._rev).then(function (resp) {
              // VOCÊ ESTA FAZENDO ISSO ERRADOOOOOOO!!!!!

Que tal?

  remotedb.allDocs(...)  
  .then( resultOfAllDocs => {
    return localdb.put(...);
  })
  .then( resultOfPut => {
    return localdb.get(...);
  })
  .then( resultOfGet => {
    return localdb.put(...);
  })
  .catch( err => {
    console.log(err);
  });

Pode não ser assíncrono...

  facaAlgo().then(function() {  
    facaOutraCoisa();
  })
  .then(function(arg) {
    console.log(arg); // undefined / sync
    return 'VALOR';
  })
  .then(function(arg) {
    console.log(arg); // 'VALOR' / sync
    return Promise.resolve('MYPROMISE');
  })
  .then(function(arg) {
    console.log(arg); // 'MYPROMISE' / async
  });

Lidando com multiplas promises

  db.allDocs({include_docs: true}).then( result => {  
    result.rows.forEach( row => {
      db.remove(row.doc);  
    });
  }).then(() => {
    // Será que funciona??
  });

Catching errors

  myPromise()
  .then(() => makePromise())
  .then(() => makePromise())
  .then(() => makePromise())
  .catch(error => {
    window.location.href = 
      "http://stackoverflow.com/search" + error.message;
  });

Arrow Functions

• Não é apenas sugar sintaxe!
• Compartilham o contexto de onde ela é criada
• Não criam seu próprio 'this' and 'arguments'
• Não podem ser usadas para criação de objetos
• Não tem seu próprio prototype
• Implementação otimizada e mais leve

Elas não tem seu próprio contexto... MESMO!

 let foo = {
   x: 666,
   normal: function(){ console.log(this.x, arguments) },
   arrow: () => console.log(this.x, arguments)
 }

Não são construtores e não tem protótipo...

 let foo = {
   x: 666,
   normal: function(){ console.log(this.x, arguments) },
   arrow: () => console.log(this.x, arguments)
 }

JavaScript Modules

• Módulos nativos a nível de linguagem
• Análise estática de estrutura
• Importes parciais
• Modelo de carregamento assíncrono

Análise estática?

 // lib/math.js

 export function sum(x, y) {
   return x + y;
 }

 export default 3.141593;

Estruturas de Dados Eficientes

• Sets e Maps iteráveis
• Implementação otimizada e mais leve
• Maps aceitam chaves de qualquer tipo
• WeakSet e WeakMap não iteráveis
• Opção sem vazamento e retenção de dados

• Melhores estratégias para lidar com o  Garbage Collection

Estruturas Iteráveis

Estruturas não Iteráveis Sem Vazamento

Generators

• São funções que podem ser pausadas
• Podem retornar múltiplos valores
• Um retorno para cada pausa
• Podem retornar valores infinitamente
• Sugar sintaxe para a nova interface de interators

Exemplo simples

  function* sayHello() {  
    yield "Ola";
    yield "mundo!";
  }

  for(let i of sayHello())  
    console.log(i);
  // "Ola"
  // "mundo!"

Por baixo dos panos:

  function* sayHello() {  
    yield "Ola";
    yield "mundo!";
  }

  const iterator = contar(3);
  // { next() }

  iterator.next()
  // { value: "Ola", done: false }

  iterator.next()
  //{ value: "mundo!", done: true }

Symbols

• Novo tipo primitivo do Javascript
• São sempre, sempre únicos!
• Podem conter uma descrição opicional
• Podem ser usadas como chave de acesso a objetos
• Permitem acesso a propriedades quaaase privados
• Mas pode ser acessados com  'Object.getOwnPropertySymbols'
• Principal objetivo deles é evoluir a linguagem evitando breaking changes!

Symbols são sempre únicos, MESMO!

Symbols permitem propriedades privadas... ou quase!

  const privateProp = Symbol("myPrivate");

  const obj = {
    ["normalProp"]: "normalProp",
    [privateProp]: "symbolProp"
  }

  console.log(Object.keys(obj));
  // [ 'normalProp' ]

  console.log(obj[privateProp]);
  // 'symbolProp'

  console.log(Object.getOwnPropertySymbols(obj));
  // [ Symbol(myPrivate) ]

Built-in Symbols para novas funcionalidades do JavaScrip

  Symbol.iterator

  Symbol.match

  Symbol.species

Classes

• Apenas sugar sintaxe para OO do JS baseada em Prototypes
• Não acrecenta nada de novo que já não era possível antes

• Permite construção de objetos de maneira mais clara e legivel

• OO clássica baseada em classes pode induzir a más práticas

• Grandes poderes vem com grandes responsabilidades

• Lembre-se sempre: use composição ao invez de herança

Exemplo

  class MyArray extends Array {
    constructor() {
      super(arguments);
      this.myInstanceProp = "hey";
    }
    toString() {
      return "My Own " + super.toString();
    }
    static defaultArray() {
      return new MyArray(6, 6, 6);
    }
  }

  const my = MyArray.defaultArray();
  console.log(my.toString());
  //My Own [object Arguments]