Let, Var e Const: Definindo Variáveis em JavaScript
ES6 em 2015 trouxe novas maneiras de definir variáveis JavaScript. A palavra-chave let cria uma variável com escopo de bloco enquanto const especifica um valor imutável. Aqui está o resumo de como esses tipos de variáveis modernos diferem da var. Clássica
Var
Antes do ES6, var era sua única opção ao definir uma variável. Você pode alterar livremente os valores das variáveis criadas com var. Você também pode redeclarar a própria variável.
var demo = " primeiro valor & quot ;; var demo = " segundo valor & quot ;; demo = " terceiro valor & quot ;; exemplo = " isso gera um erro - variável não declarada & quot ;;
Usar var cria uma variável cujo escopo é a função atual. No caso de você usá-lo fora de uma função, a variável resultante terá um escopo global.
O “ escopo ” de uma variável descreve onde ela pode ser usada. Uma variável com escopo de função pode ser acessada por código na função que a define. Uma variável global pode ser acessada em todo o seu código.
var myGlobal = " global & quot ;; função testA & # 40; & # 41; & # 123; var myFunctionScope = " testA & quot ;; console. log & # 40; myFunctionScope & # 41 ;; console. log & # 40; myGlobal & # 41 ;; & # 125; função testB & # 40; & # 41; & # 123; myGlobal = " sobrescrito! & quot ;; console. log & # 40; myGlobal & # 41 ;; // console. log (myFunctionScope); // ERRO & # 125; testA & # 40; & # 41 ;; testB & # 40; & # 41 ;; testA & # 40; & # 41 ;;
Neste exemplo, a diferença entre variáveis com escopo global e variáveis com escopo de função é exibida. myGlobal pode ser lido (e escrito) por testA e testB. myFunctionScope é definido apenas em testA, então testB gera um erro ao tentar acessá-lo. Aqui está o que este exemplo produziria:
testA global substituído! testA substituído!
Publicidade
O valor de myFunctionScope é mantido separadamente dentro de cada função. O valor de myGlobal é atualizado em ambas as funções quando testB o substitui.
Vamos
A palavra-chave let mais recente é a alternativa moderna para var. Freqüentemente, você pode adotar let em todos os lugares em que costumava escrever var. No entanto, existem diferenças importantes a serem observadas.
O recurso let mais significativo é seu escopo. As variáveis têm como escopo blocos de código individuais em vez de funções inteiras. Em JavaScript, um bloco é uma seção de código que está entre chaves. Cada variável let só é acessível ao código dentro de seu bloco.
função letTest & # 40; x & # 41; & # 123; let demo = " hello world & quot ;; se & # 40; x > 10 & # 41; & # 123; deixe y = 9000; demo = " foobar & quot ;; & # 125; console. log & # 40; demo & # 41 ;; // " foobar " console. log & # 40; y & # 41 ;; // ERRO & # 125;
Neste exemplo, a instrução if cria um novo bloco de código. Os blocos herdam o escopo de seu bloco pai, portanto, a variável demo permanece disponível. A variável y tem como escopo a instrução if. Tentar acessar y fora do bloco if resulta em um erro de variável indefinida.
Como var, as variáveis criadas com let podem ter seus valores alterados a qualquer momento. Eles não podem ser declarados novamente embora – usar let duas vezes com o mesmo nome em um único bloco causará um erro.
deixe demo = " teste & quot ;; demo = " exemplo & quot ;; let demo = " test & quot ;; // ERROR
Uma exceção é quando redeclarar uma variável em um escopo aninhado. As regras de escopo em nível de bloco significam que isso é permitido – você acaba com duas variáveis separadas que por acaso têm o mesmo identificador.
let foo = " bar & quot ;; if & # 40; true & # 41; & # 123; let foo = " foobar & quot ;; console. log & # 40; foo & # 41 ;; & # 125; console. log & # 40; foo & # 41 ;;
Publicidade
O exemplo acima iria emitir foobar bar. A variável foo é declarada novamente no bloco if, sem impactar a variável foo do escopo externo. Você perde a capacidade de fazer referência à variável externa de dentro do bloco interno.
Const
A palavra-chave const foi outra adição do ES6. É com escopo de bloco como let. const é a abreviação de “ constante ” e é usado para valores imutáveis que nunca mudarão. Tentar atualizar o valor de uma variável const sempre resultará em um erro.
const foo = " bar & quot ;; const foo = " foobar & quot ;; // ERRO
Como consequência, você deve sempre inicializar as variáveis const com um valor. Não é permitido definir uma const e definir seu valor posteriormente.
let demoLet; // OKvar demoVar; // OKconst demoConst; // ERRORconst demoConst = " valor & quot ;; // OK
Tecnicamente, const não define um valor constante. Na verdade, ele cria uma referência constante a um valor. O efeito disso é que você ainda pode atualizar as propriedades dos objetos atribuídos a um const. Erros ocorrem apenas se você usar o próprio const no lado esquerdo de uma atribuição.
Qual tipo de variável devo usar?
Você deve adotar let para a maioria das variáveis de uso geral em seu código JavaScript. O escopo em nível de bloco e a redeclaração proibida ajudam a detectar erros e evitar sobrescrições não intencionais.
Usando a variável let stops “ vazamento, ” onde as variáveis podem ser acessadas em escopos para os quais não se destinam. Um exemplo clássico são os iteradores em loops:
para & # 40; var i = 0; i < = 10; i ++ & # 41; & # 123; // fazer algo & # 125; console. log & # 40; i & # 41 ;;
Publicidade
Isso resultaria em 10 sendo emitido para o console. Em vez disso, usar let emitiria undefined, pois a variável i seria inacessível fora de if. alcance. Normalmente, esse é o resultado desejado nesse tipo de cenário.
Os loops também demonstram os perigos da reatribuição de var:
para & # 40; var i = 0; i < = 10; i ++ & # 41; & # 123; setTimeout & # 40; & # 40; & # 41; = > console. log & # 40; i & # 41;, 1000 & # 41 ;; & # 125;
À primeira vista, este código parece que deveria emitir os números de 1 a 10. Em vez disso, 10 será registrado dez vezes. setTimeout () é assíncrono ei no retorno de chamada é vinculado lexicamente ao escopo. Como var i está sendo usado no loop, a variável i obtém um novo valor a cada iteração. Quando o retorno de chamada do cronômetro é executado, todas as dez iterações já foram concluídas e eu sempre resolverei para o valor final – 10, neste caso.
Usar let i, em vez disso, declararia uma nova variável chamada i para cada iteração do loop. Cada variável reteria seu próprio valor após a conclusão de sua iteração, resultando na saída de log esperada.
Quando não usar Deixe
Existem situações em que você não deve usar let. Você deve usar const quando estiver criando uma variável que você sabe que nunca mudará. Bundlers e ferramentas de análise estática poderão alertá-lo se você tentar reatribuir seu valor inadvertidamente.
Normalmente, é uma boa ideia manter as variáveis imutáveis sempre que possível. Isso ajuda a erradicar bugs causados por sobrescrições não intencionais. Usar const também ajuda a indicar sua intenção em uma base de código, tornando explícito que um valor não mudará.
Os recursos do ES6, como let e const, agora são universalmente suportados por navegadores modernos. Alguns navegadores mais antigos sem suporte completo a ES6, notavelmente o Internet Explorer 11, também os oferecem. Você não precisa se preocupar se eles estarão disponíveis, a menos que você esteja almejando uma plataforma muito desatualizada. Use let e const para manter seu código mais limpo e reduzir o risco de bugs ocultos.
Nenhum comentário