Existe desde que a primeira versão do Javascript.
var tem function scope e ele não respeita o block scope exceto se for declarado dentro um function block.
Isto faz com que uma variável ao ser declarada com var não seja limpa ao sair de um bloco mas sim de um bloco
de função.
var pode ser hoisted, ou seja, promovida. Se uma variavel for declarada dentro de uma function que não tenha
uma function pai ela é automaticamente promovida do escopo de bloco/function para global.
let
Existe a partir da ES2015/ES6, muito recente.
let tem sempre escopo de bloco, isto significa que se a variável for definida dentro do bloco ao sair desse um bloco
ela será destruida.
Exemplo1:
<script>
function funcao1() {
if (true) {
var x = 1;
let y = 2;
}
alert(x); //consegue emitir Alert - 1
alert(y); //não consegue emitir Alert-Erro variável indefinida
}
</script>
Como o browser exibe:
Como podemos constatar a variável x declarada com var não foi apagada ao terminar o bloco mas a variavel y declarada
com let foi apagada e com isto o browser exibiu um erro ( ver no depurador do browser ).
Exemplo2:
<script>
function funcao2() {
alert(x); //Emite alert-exibe undefined
alert(y); //não consegue emitir-dá erro de variável indefinida
if (true) {
var x = 1;
let y = 2;
}
}
</script>
Como o browser exibe:
Como podemos constatar a variável x ainda não havia sido declarada quando foi solicitado o Alert
mas não deu erro, só a mensagem indefinida.
Com a variável declarada com let foi diferente, deu erro de execução, variável y não definida, ver no depurador do
browser.
Diferença entre =, == e ===
=
É uma atribuição. Exemplo : var x = 2; A variável x recebe o valor 2.
==
Significa igual. É uma comparação dos valores das duas variaveis.
Exemplo :
if ( x == y) {
alert('as variáveis são iguais);
}
else{
alert('as variáveis NÃO são diferentes);
}
Exemplo 3 :
<script>
function funcao3() {
var x = 5;
let y = '5';
if (x == y) {
alert("Exemplo 3 - x e y são Iguais")
}
}
</script>
Como funciona:
===
Significa idênticas. É uma comparação dos valores das duas variaveis e de seus tipos também. Nesta comparação um
número e um algarismo são diferentes.
Exemplo :
if ( x === y) {
alert('as variáveis são idênticas);
}
else{
alert('as variáveis NÃO são idênticas);
}
Exemplo 4 :
<script>
function funcao4() {
var x = 5;
let y = '5';
if (x === y) {
alert("Exemplo 4 - x e y são Iguais")
}
else {
alert("Exemplo 4 - x e y são Diferentes")
}
}
</script>
Como funciona:
Diferença entre let e const
Let define variáveis e const define constantes. Qual a diferença ?
No const você pode fazer a atribuição uma única vez e depois nunca mais. Pode ser no momento da definição da variável
ou pode ser depois mas será uma única vez.
Enquanto no let você pode fazer quantas atribuições desejar.
Excessão :
Quando uma constante é um array e como array no javascript é um objeto então conseguimos inserir um novo
elemento numa constante quando quisermos.
Exemplo 5 :
<script>
function funcao5() {
const c = [1, 2];
c.push(3);
alert(c);
}
</script>
Como funciona:
Diferença entre null e undefined
Neste caso quando temos null como resposta o objeto/variável existe mas não foi atribuido valor a ela.
Quando a resposta é undefined o objeto/variável sequer existe, não foi definido ainda.
Outra diferença é se você executar o comando typeof(undefined) vai retornar undefined e se você fizer
typeoff(null) ele retorna um objeto.
O que são e para que servem arrow functions =>
Alguns objetos quando definidos sobem de escopo e vão para a o elemento window.
Veja exemplo abaixo:
Exemplo 6 - Sem usar o arrow function:
function funcao6() {
const usuario = {
nome:'',
sobrenome:'',
setaUsuario: function(nomeUsuario){
let dadosUsuario = nomeUsuario.split(' ');
nome = dadosUsuario[0];
sobrenome = dadosUsuario[1];
}
}
}
Pontos a observar : Note que as variaveis nome e sobrenome deveriam pertencer ao escopo usuario (os 2 primeiros alerts)
mas pelos dois últimos alerts podemos ver que pertencem na realidade ao objeto window.
Teste de funcionamento:
Exemplo 7- Usando arrow function:
function funcao7() {
const usuario = {
nome: '',
sobrenome: '',
setaUsuario: (nomeUsuario) => {
let dadosUsuario = nomeUsuario.split(' ');
nome = dadosUsuario[0];
sobrenome = dadosUsuario[1];
}
}