7

Na seção de variáveis da MDN temos a seguinte afirmação:

For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it's clear which variables are function scoped (local) and which are resolved on the scope chain.

Este trecho fala que é recomendado sempre declarar variáveis no topo de seu escopo devido ao fato do JavaScript ter o comportamento de variable hoisting.

Quais as implicações em não seguir esta recomendação? Particularmente, acho um código muito mais fácil de ser lido quando a declaração de sua variável é realizada no momento exatamente anterior a sua primeira utilização, em comparação a declarar todas as variáveis no início da execução de uma função, por exemplo.

Exemplificando:

// Declarando variável no topo de seu escopo
function(){
    var a = 0, b = 0;
    //some code
    a = 5;
    //some code
    b = 10;
}
//Declarando variável próximo de sua utilização
function(){
    //some code
    var a = 0;
    a = 5;
    //some code
    var b = 0;
    b = 10;
}
7
  • Em comparação a que?
    – Maniero
    Commented 13/12/2016 às 19:28
  • 3
    Acredito que essa recomendação é devido a padrão, leitura e manutenção do código. Imagina um script com 200 linhas, onde uma variável é usada na linha 180 e quem estiver atualizando precisa mudar a inicialização da variável de array para objeto. Nesse caso vai ter que ficar caçando a declaração.
    – BrTkCa
    Commented 13/12/2016 às 19:32
  • @bigown pergunta atualizada
    – Vinícius
    Commented 13/12/2016 às 19:34
  • 1
    @LucasCosta se a função tiver 200 linhas, o problema é outro.
    – Maniero
    Commented 13/12/2016 às 19:34
  • 2
    @bigown com escopo entendi escopo global. De fato, uma função com 200 linhas o problema é outro :)
    – BrTkCa
    Commented 13/12/2016 às 19:36

3 Respostas 3

7

Se você está ciente de como funciona o hoisting, as maiores implicações são para outras pessoas que possam vir a mexer no seu código.

Eu acredito que essa recomendação se baseie principalmente nas consequências de variáveis capturadas por closures. Por exemplo:

var fns = [];

for(var i=0; i<5; i++) {
  // cria closures
  fns.push(function() {
    console.log('closure sobre i com valor ', i)
  });

}

for(var j=0; j<fns.length; j++) {
  fns[j]();
}

O código acima vai sempre logar 5 como o valor de i no console, porque só existe uma variável i, e 5 é o valor dela após o loop. Isso confunde muita gente, há inúmeras perguntas sobre o assunto aqui no site. Uma parte dessa confusão é porque as pessoas esperam que a variável declarada no inicializador do for tenha escopo restrito ao bloco do for, quando na verdade ela está no escopo externo.

Compare com a versão ES-2015, usando let para declarar variáveis com escopo de bloco:

var fns = [];

for(let i=0; i<5; i++) {
    // cria closures
    fns.push(function() {
        console.log('closure sobre i com valor ', i)
    });

}

for(var j=0; j<fns.length; j++) {
    fns[j]();
}

JSFiddle

Nessa versão, cada chamada loga um valor diferente, que era o valor de i no momento da criação de cada closure. Isso indica que com let a cada iteração do for existiu uma variável i distinta (versus um único i com var). Portanto tem o comportamento esperado por quem está acostumado com escopo de bloco.

De fato, em ES-2015 recomenda-se colocar as declarações com let sempre logo antes do uso, justamente por ele não criar a mesma confusão que o var.

6

Problemas do hoisting

De fato você corre o risco de hoisting se não organizar bem o código. Se a função dor tão complicada assim talvez o problema seja outro. Note que se organizar o código direito não há problema algum. É só o risco de cair em uma situação problemática sem querer. Se tiver alguma ferramenta que ajuda analisar código pode evitar que aconteça algum deslize sem querer.

Não vou entrar em detalhes porque o link acima já explica melhor como é o efeito hoisting, mas em resumo, a variável, superficialmente falando, é criada no início da execução da função, então declará-la ali é ter a certeza que o código expressa a realidade do que será executado. Se declarar em outro lugar, pode ser que não aconteça o que espera. Exemplo de problema:

var x = 0;
function hoisting() {
    console.log(x);
    var x = 1;
    console.log(x);
}
function nonHoisting() {
    var x = 1;
    console.log(x);
}
function nonHoisting2() {
    console.log(x);
}
hoisting();
nonHoisting();
nonHoisting2();

Escopo global

Não recomendo usar escopo global, mas se o fizer, eu acho melhor declarar tudo antes mesmo. A bagunça já está feita, então é melhor organizar o melhor que puder, é muito fácil cometer um deslize nesse caso. Colocou uma função que use esta variável antes dela ter sido declarada e já pode ter surpresas.

let

Isto só ocorre com o var. Com o let esse risco não corre. Por isso eu acho mais interessante sempre que possível (se vai usar versão nova do JS ou se vai passar por um tradutor. Ele foi criado para resolver um problema que a linguagem tinha.

Assim pode fazer o que realmente é o mais recomendado na maioria dos casos, que é declarar a variável perto de onde ela será usada.. Com o var, ou toma muito cuidado ou pode ter o hoisting.

function teste(){
    //some code
    let a = 0;
    a = 5;
    //some code
    let b = 0;
    b = 10;
  console.log(a + b);
}
teste();

Coloquei no GitHub para referência futura.

4

Quais as implicações em não seguir esta recomendação?: isso tem a ver com clareza e organização de código.

Hoje em dia existe o let e const para declarar variáveis, e que dão erro se a variável fôr declarada duas vezes dentro do mesmo escopo ou bloco.

Com var cenários destes são possiveis:

var a = 10;
// outras linhas de código aqui...
// e depois, misturado algures dentro da mesma função:
var a = function(){}

ou seja, podemos no mesmo escopo declarar a duas vezes sem que sejamos avisados que o primeiro a foi sobre-escrito!

Se colocar-mos todas as declarações de variáveis no inicio do escopo, seria mais fácil detetar isto:

var a = 10;
var a = function(){} // <--- oops, "a" já foi declarado
// outras linhas de código aqui...

Com let ou const o código em cima daria erro:

Uncaught SyntaxError: Identifier 'a' has already been declared

A outra razão, é hoisting. Ou seja, na prática as variáveis são declaradas no topo do escopo. Mesmo que tenhamos var a = b; no meio do código o interpretador de JavaScript irá sempre ler desta maneira:

var a; // declara e fica como indefenido // o resto do código a = b; // o valor é atribuído só quando a execução chega a essa linha de código.

exemplo:

console.log(a); // undefined
try {
    console.log(b); // vai dar erro
} catch (e) {
    console.log(e); // erro: ReferenceError: b is not defined
}
var a = 10;
console.log(a); // 10

Ora para evitar confusões e para o código refletir o que acontece dentro do interpretador, aconselha-se a declarar as variáveis no topo do escopo/bloco.

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 .