5

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 e const?

2 Respostas 2

8

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"

2

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .