Tópicos:

• Declaração e Inicialização
• Redeclaração e Redesignação
• Elevação
• Escopos

Antes do ES6 (ECMAScript 6), havia apenas uma palavra-chave para declarações de variáveis, que é var , e dois tipos de escopo: global e function scope . No entanto, as coisas mudaram em 2015, porque o ES6 introduziu duas novas palavras-chave: let e const , e mais um tipo de escopo: block scope . Quer saber por que essas coisas foram introduzidas no ECMAScript 6 e as diferenças entre elas? Então fique aqui e vamos conversar sobre isso.

Problemas com var

Quando var era a única maneira de declarar variáveis ​​em JavaScript , às vezes você poderia enfrentar bugs causados ​​pelo escopo da variável, porque a palavra-chave var não é segura para o escopo . Vamos ver como isso funciona.

Neste caso, a variável play é declarada duas vezes, mas no console é impresso o valor “not a game”, pois as vars podem ser reatribuídas. Hoje em dia, var não é recomendado porque tem um escopo funcional . O exemplo abaixo explicará melhor.

Dentro da função start, você pode acessar a variável play , mas se você tentar acessar essa variável fora da função start, obterá um Reference Error . Isso acontece porque a var play foi declarada dentro de uma função, então seu escopo não é global, mas sim funcional.

Inicialização

Neste exemplo, o grupo de variáveis ​​é primeiro declarado e depois inicializado. Mas você pode fazer isso ao mesmo tempo. Olhar:

Elevação

Tudo bem, deixe-me falar sobre Hoisting em JavaScript. Ele move variáveis ​​e declarações de função para o topo de seu escopo antes da execução do código. Darei a você o código que vemos no IDE e o código “oculto”. Se você tentar acessar uma var antes de sua inicialização, obterá um undefined .

É impresso “indefinido” porque o Hoisting faz isso:

Como eu disse anteriormente, o mecanismo Hoisting move a declaração var para o topo de seu escopo, mas não move a inicialização, por isso você obtém um “undefined”. Abaixo você pode ver outro exemplo de Hoisting, mas este é com uma função.

Let e ​​const

Let e ​​const , introduzidos pela primeira vez em 2015, funcionam de maneira semelhante a var , mas let e const não permitem que você redeclare uma variável. Se você tentar redeclará-lo, receberá um SyntaxError . Ver:

E deixe a reatribuição funcionar bem:

Let e ​​Const têm escopo de bloco (que é qualquer coisa em torno de chaves de abertura e fechamento, como este {}), enquanto var tem escopo global e de função . Se você não sabe o que é escopo global, basicamente significa que você pode acessar uma variável em qualquer lugar do seu programa, se você declarou a variável fora dos blocos.

Como você pode ver no código acima, a variável house só está disponível dentro desse bloco, pois foi declarada ali, então fora dela, você obtém um ReferenceError . Mas, se você declarar globalmente e atribuir um valor à variável dentro de um bloco, esse valor permanecerá. Aqui está o que eu quis dizer:

E o Içamento? Infelizmente, ou felizmente, let e const não têm esse mecanismo, mas var tem. Em vez de retornar “undefined” no console como var hoisting, deixe e const retorne um ReferenceError conforme mostrado abaixo.

Deixe Içar:

Içamento constante:

A palavra-chave const não pode ser redeclarada ou reatribuída. Se você tentar redeclarar uma variável constante, obterá um SyntaxError .

E uma reatribuição dá a você um TypeError .

Isso acontece porque const funciona assim: você deve declará-lo e inicializá-lo ao mesmo tempo. É assim que funciona. Não inicializá-lo resultará em um SyntaxError .

Mas lembre-se, const não é imutável. Um objeto atribuído a uma variável const pode ter seu valor alterado, você pode adicionar propriedades a ele…

De acordo com W3Schools , uma const não define um valor constante . Ele define uma referência constante a um valor. Lembrando o exemplo anterior, você pode alterar o valor de uma propriedade, adicionar outras propriedades, mas não pode alterar a referência do objeto, pois isso causa um TypeError .

Conclusão

Vamos reunir todos os tópicos que abordamos hoje. Dê uma olhada na tabela abaixo:

É isso! Neste artigo, você aprendeu as diferenças entre var , let e const , os tipos de escopo e o mecanismo Hoisting. Se tiver alguma dúvida, entre em contato que tentarei te ajudar

Vejo você em breve!