As dúvidas são as seguintes:
- Qual a diferença entre escopo de bloco e escopo de função no JavaScript?
- A ideia de escopo de bloco surgiu no EcmaScript 6 com
let
econst
?
Qual a diferença entre escopo de bloco e escopo de função no JavaScript?
A partir de ES6, usando let
ou const
é possível declarar variáveis que só existem dentro de blocos {}
.
O exemplo mais comum é dentro de if
, for
, try
, catch
mas também simplesmente:
const foo = 123;
{
// console.log(foo); // Erro, detecta a variável mas ainda não está declarada
const foo = 456;
console.log(foo); // 456
}
console.log(foo); // 123
Em JavaScript anterior a ES6 só existia var
que não é sensível ao escopo de blocos e só respeita o escopo de funções. let
e const
respeitam o escopo de função e de bloco.
Sintetizando:
╔═════════════════════════╦════════════╦═════════════╦═════════════╗
║ ║ var ║ let ║ const ║
╠═════════════════════════╬════════════╬═════════════╬═════════════╣
║ pode ser sobre-escrita ║ ✓ ║ ✓ ║ x ║
╠═════════════════════════╬════════════╬═════════════╬═════════════╣
║ escopo ║ funcão ║ bloco ║ bloco ║
╠═════════════════════════╬════════════╬═════════════╬═════════════╣
║ referenciável antes da ║ ║ ║ ║
║ linha de declaração ║ ✓ ║ x ║ x ║
╚═════════════════════════╩════════════╩═════════════╩═════════════╝
A ideia de escopo de bloco surgiu no EcmaScript 6 com let e const?
Sim, antes havia somente "function scope"
Um escopo de bloco é aquele dentro de blocos de código for
, if else
, try catch
entre outros:
let foo = undefined;
try {
let foo = 'foo';
throw new Error();
} catch(e) {
//foo === undefined
console.log(foo);
} finally {
//foo === undefined
console.log(foo);
}
if (true) {
let foo = 'foo';
}
//foo === undefined
console.log(foo);
As variáveis let foo = 'foo';
só existem dentro dos respectivos blocos (try
e if
), nos blocos catch
, finally
e no escopo global a variável foo
é referente a variável no escopo global let foo = undefined;
O escopo de funnção é igual, porém em vez de um bloco de código qualquer, é o bloco de uma função:
let foo = undefined;
function bar() {
var foo = 'foo';
}
bar();
//foo === undefined
console.log(foo);
const baz = () => {
var foo = 'foo';
}
baz();
//foo === undefined
console.log(foo);
class Qux {
constructor() {
var foo = 'foo';
}
}
new Qux();
//foo === undefined
console.log(foo);
Como pode ver todas variáveis var foo = 'foo';
não existem fora da função, tanto tradicional como arrow functions, ou classe assim como nos exemplos anteriores em relação ao escopo de bloco
Não sei dizer se esse tipo de escopo surgiu com o ES6, mas antes dele não era possível, pelo menos não com JavaScript, talvez algo com TypeScript, CoffeScript ou algo assim