ECMAScript 2015: Let + Const

ES2015 Gotchas é uma série quinzenal sobre as novidades e pegadinhas do ES2015.

Ganhamos duas novas formas de declaração de valores no Javascript, uma variável e outra constante. A principal característica das duas que a diferem do modelo atual com var é o escopo fechado, ou seja, essas duas novas formas de declaração existem apenas dentro do bloco/contexto em que foi criado, e sem nunca sujar seu escopo global.

Escopo fechado sempre!

Parece simples, mas as implicações de um escopo realmente fechado nem sempre estão claras. Por exemplo, ao declarar uma variável com let dentro de um looping, cada iteração desse loop terá sua própria versão do mesmo, fechado em um contexto que ainda poderá ser usado posteriormente por uma função passada por parâmetro, como um callback que terá seu valor preservado para cada iteração do looping.

Confuso? Vamos ver em um exemplo com o clássico var:

var methods = [];

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

methods[5]()  

No código acima estamos alimentando um array com funções que apenas exibem o valor da variável i para cada iteração. Iniciantes no javascript tendem a se confundir achando que o valor que será exibido na ultima linha desse código exibira índice 5, com var = 5, porém um programador javascript experiente sabe que não, no modelo clássico de declaração do JavaScript, mesmo que se redeclare uma variável ela ainda é a mesma, e cada uma das funções nesse array exibirá o último valor do índice, ou seja, teremos var = 9 sempre.

Agora experimente trocar a forma declaração da variável no looping acima usando let, magicamente teremos o resultado esperado pelos iniciantes e alguns macacos velhos assustados! Cada função acumulada no array será executada em um contexto diferente com uma variável chama i única com seu próprio valor criado em cada iteração.

Constantes não são imutáveis!

Constantes são uma novidade mais que bem vinda no JavaScript, dê preferência a elas sempre que não for precisar de uma segunda atribuição, os benefícios são muitos! Além de deixar esse fato evidente, ainda será beneficiado por otimizações, terá ajuda do seu ferramental e erros de execução explícitos.

Porem um detalhe que nos passa despercebido é que constantes não impedem que o valor atribuído a ela seja alterado, caso seu valor seja naturalmente mutável. Isso não será notado caso esteja lidando com tipos primitivos, como números e strings, que são naturalmente imutáveis no javascript, porem objects são mutáveis por padrão, e podem ser alterados mesmo quando declarados como constantes, ou seja, novos atributos podem ser criados, modificados ou excluídos. Veja o exemplo abaixo:

const c = {};

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

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

Constantes garantem apenas uma referência que nunca poderá ser apontada para outro lugar. Caso queira objetos realmente imutáveis será necessário fazê-lo explicitamente com Object.freeze(obj), independente da forma de declaração.

Até a próxima! Fiquem ligados na série ES2015 Gotchas!

William Grasel

Read more posts by this author.