ES6 - Variáveis
UMA variable, por definição, é “um espaço nomeado na memória” que armazena valores. Em outras palavras, ele atua como um contêiner para valores em um programa. Os nomes das variáveis são chamadosidentifiers. A seguir estão as regras de nomenclatura para um identificador -
Os identificadores não podem ser palavras-chave.
Os identificadores podem conter letras e números.
Os identificadores não podem conter espaços e caracteres especiais, exceto o sublinhado (_) e o cifrão ($).
Os nomes das variáveis não podem começar com um número.
Sintaxe de tipo
Uma variável deve ser declarada antes de ser usada. Sintaxe ES5 usado ovarpalavra-chave para conseguir o mesmo. A sintaxe ES5 para declarar uma variável é a seguinte.
//Declaration using var keyword
var variable_nameES6 apresenta a seguinte sintaxe de declaração de variável -
- Usando o let.
- Usando o const.
Variable initializationrefere-se ao processo de armazenamento de um valor na variável. Uma variável pode ser inicializada no momento de sua declaração ou em um momento posterior.
A sintaxe de tipo ES5 tradicional para declarar e inicializar uma variável é a seguinte -
//Declaration using var keyword
var variable_name = valueExemplo: usando variáveis
var name = "Tom"
console.log("The value in the variable is: "+name)O exemplo acima declara uma variável e imprime seu valor.
A seguinte saída é exibida na execução bem-sucedida.
The value in the variable is TomJavaScript e digitação dinâmica
JavaScript é uma linguagem não digitada. Isso significa que uma variável JavaScript pode conter um valor de qualquer tipo de dados. Ao contrário de muitas outras linguagens, você não precisa dizer ao JavaScript durante a declaração da variável que tipo de valor a variável manterá. O tipo de valor de uma variável pode mudar durante a execução de um programa e o JavaScript cuida disso automaticamente. Este recurso é denominado comodynamic typing.
JavaScriptVariable Scope
O escopo de uma variável é a região de seu programa na qual ela é definida. Tradicionalmente, o JavaScript define apenas dois escopos - global e local.
Global Scope - Uma variável com escopo global pode ser acessada de qualquer parte do código JavaScript.
Local Scope - Uma variável com escopo local pode ser acessada de dentro de uma função onde é declarada.
Exemplo: variável global vs. local
O exemplo a seguir declara duas variáveis pelo nome num - uma fora da função (âmbito global) e a outra dentro da função (âmbito local).
var num = 10
function test() {
var num = 100
console.log("value of num in test() "+num)
}
console.log("value of num outside test() "+num)
test()A variável, quando referida na função, exibe o valor da variável com escopo local. No entanto, a variávelnum quando acessado fora da função, retorna a instância com escopo global.
A seguinte saída é exibida na execução bem-sucedida.
value of num outside test() 10
value of num in test() 100ES6 define um novo escopo de variável - O escopo do Bloco.
O escopo Let and Block
O escopo do bloco restringe o acesso de uma variável ao bloco no qual ela é declarada. ovarpalavra-chave atribui um escopo de função à variável. Ao contrário da palavra-chave var, olet A palavra-chave permite que o script restrinja o acesso à variável ao bloco envolvente mais próximo.
"use strict"
function test() {
var num = 100
console.log("value of num in test() "+num) {
console.log("Inner Block begins")
let num = 200
console.log("value of num : "+num)
}
}
test()O script declara uma variável numdentro do escopo local de uma função e a declara novamente dentro de um bloco usando a palavra-chave let. O valor da variável com escopo local é impresso quando a variável é acessada fora do bloco interno, enquanto a variável com escopo de bloco é referida dentro do bloco interno.
Note - O modo estrito é uma forma de ativar uma variante restrita do JavaScript.
A seguinte saída é exibida na execução bem-sucedida.
value of num in test() 100
Inner Block begins
value of num : 200Exemplo: let v / s var
var no = 10;
var no = 20;
console.log(no);A seguinte saída é exibida na execução bem-sucedida do código acima.
20Vamos reescrever o mesmo código usando o let palavra-chave.
let no = 10;
let no = 20;
console.log(no);O código acima irá gerar um erro: O identificador 'não' já foi declarado. Qualquer variável declarada usando a palavra-chave let é atribuída ao escopo do bloco.
deixar e bloquear segurança de nível
Se tentarmos declarar um letvariável duas vezes dentro do mesmo bloco, gerará um erro. Considere o seguinte exemplo -
<script>
let balance = 5000 // number type
console.log(typeof balance)
let balance = {message:"hello"} // changing number to object type
console.log(typeof balance)
</script>O código acima resultará no seguinte erro -
Uncaught SyntaxError: Identifier 'balance' has already been declareddeixe e vários blocos
No entanto, o mesmo let variável pode ser usada em diferentes escopos de nível de bloco sem nenhum erro de sintaxe.
Exemplo
<script>
let count = 100
for (let count = 1;count <= 10;count++){
//inside for loop brackets ,count value starts from 1
console.log("count value inside loop is ",count);
}
//outside for loop brackets ,count value is 100
console.log("count value after loop is",count);
if(count == 100){
//inside if brackets ,count value is 50
let count = 50;
console.log("count inside if block",count);
}
console.log(count);
</script>A saída do código acima será a seguinte -
count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100O const
o constdeclaração cria uma referência somente leitura para um valor. Isso não significa que o valor que contém seja imutável, apenas que o identificador da variável não pode ser reatribuído. Constantes têm escopo de bloco, muito parecido com variáveis definidas usando a instrução let. O valor de uma constante não pode mudar por meio de reatribuição e não pode ser declarado novamente.
As seguintes regras são verdadeiras para uma variável declarada usando o const palavra-chave -
- Constantes não podem ser reatribuídas a um valor.
- Uma constante não pode ser declarada novamente.
- Uma constante requer um inicializador. Isso significa que as constantes devem ser inicializadas durante sua declaração.
- O valor atribuído a um const variável é mutável.
Exemplo
const x = 10
x = 12 // will result in an error!!O código acima retornará um erro, pois constantes não podem ser reatribuídas a um valor. As variáveis constantes são imutáveis.
Constantes são imutáveis
Ao contrário das variáveis declaradas usando let palavra-chave, constantssão imutáveis. Isso significa que seu valor não pode ser alterado. Por exemplo, se tentarmos alterar o valor da variável constante, um erro será exibido.
<script>
let income = 100000
const INTEREST_RATE = 0.08
income += 50000 // mutable
console.log("changed income value is ",income)
INTEREST_RATE += 0.01
console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>A saída do código acima será a seguinte -
changed income value is 150000
Uncaught TypeError: Assignment to constant variableconst e matrizes
O exemplo a seguir mostra como criar uma matriz imutável. Novos elementos podem ser adicionados ao array. No entanto, a reinicialização da matriz resultará em um erro conforme mostrado abaixo -
<script>
const DEPT_NOS = [10,20,30,50]
DEPT_NOS.push(40)
console.log('dept numbers is ',DEPT_NOS)
const EMP_IDS = [1001,1002,1003]
console.log('employee ids',EMP_IDS)
//re assigning variable employee ids
EMP_IDS = [2001,2002,2003]
console.log('employee ids after changing',EMP_IDS)
</script>A saída do código acima será conforme mostrado abaixo -
dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.A palavra-chave var
Antes do ES6, o varpalavra-chave foi usada para declarar uma variável em JavaScript. Variáveis declaradas usandovarnão oferecem suporte ao escopo de nível de bloco. Isso significa que se uma variável é declarada em um loop ouif block pode ser acessado fora do loop ou do if block. Isso ocorre porque as variáveis declaradas usando ovar levantamento de suporte de palavra-chave.
var e içamento
Variable hoistingpermite o uso de uma variável em um programa JavaScript, mesmo antes de ser declarada. Essas variáveis serão inicializadas paraundefinedpor padrão. O tempo de execução do JavaScript verificará as declarações de variáveis e as colocará no início da função ou script. Variáveis declaradas comvara palavra-chave é içada ao topo. Considere o seguinte exemplo -
<script>
variable company is hoisted to top , var company = undefined
console.log(company); // using variable before declaring
var company = "TutorialsPoint"; // declare and initialized here
console.log(company);
</script>A saída do código acima será conforme mostrado abaixo -
undefined
TutorialsPointvar e escopo de bloco
o block scoperestringe o acesso de uma variável ao bloco em que está declarada. ovarpalavra-chave atribui um escopo de função à variável. Variáveis declaradas usando ovara palavra-chave não tem um escopo de bloco. Considere o seguinte exemplo -
<script>
//hoisted to top ; var i = undefined
for (var i = 1;i <= 5;i++){
console.log(i);
}
console.log("after the loop i value is "+i);
</script>A saída do código acima será a seguinte -
1
2
3
4
5
after the loop i value is 6A variável i é declarado dentro do loop for usando o varpalavra-chave. A variável i é acessível fora do loop. No entanto, às vezes, pode ser necessário restringir o acesso de uma variável dentro de um bloco. Não podemos usar ovarpalavra-chave neste cenário. ES6 apresenta olet palavra-chave para superar essa limitação.
segurança de nível de var e bloco
Se declararmos o mesmo variable duas vezes usando o var keyworddentro de um bloco, o compilador não lançará um erro. No entanto, isso pode levar a erros lógicos inesperados no tempo de execução.
<script>
var balance = 5000
console.log(typeof balance)
var balance = {message:"hello"}
console.log(typeof balance)
</script>A saída do código acima é mostrada abaixo -
number
object