Declarando várias variáveis ​​em JavaScript

Em JavaScript, é possível declarar várias variáveis ​​como esta:

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

...ou assim:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

Um método é melhor / mais rápido que o outro?

A primeira maneira é mais fácil de manter. Cada declaração é uma única declaração em uma única linha, para que você possa adicionar, remover e reordenar facilmente as declarações.

Com a segunda maneira, é irritante remover a primeira ou a última declaração porque elas contêm a varpalavra - chave e o ponto-e-vírgula. E toda vez que você adiciona uma nova declaração, é necessário alterar o ponto e vírgula na linha antiga para uma vírgula.

Além da capacidade de manutenção, a primeira maneira elimina a possibilidade de criação de variáveis ​​globais de acidentes:

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

Enquanto a segunda maneira é menos tolerante:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

É comum usar uma vardeclaração por escopo para organização. A maneira como todos os "escopos" seguem um padrão semelhante, tornando o código mais legível. Além disso, o mecanismo "eleva" todos eles ao topo de qualquer maneira. Portanto, manter suas declarações juntas imita o que realmente acontecerá mais de perto.

É muito mais legível ao fazê-lo desta maneira:

var hey = 23;
var hi = 3;
var howdy 4;

Mas ocupa menos espaço e linhas de código desta maneira:

var hey=23,hi=3,howdy=4;

Pode ser ideal para economizar espaço, mas permita que os compressores JavaScript cuidem disso para você.

Talvez assim

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

Exceto ao alterar a primeira ou a última variável, é fácil manter e ler.

É apenas uma questão de preferência pessoal. Não há diferença entre essas duas maneiras, exceto alguns bytes salvos com o segundo formulário, se você remover o espaço em branco.

O ECMAScript6 introduziu uma atribuição de desestruturação que funciona muito bem:

[a, b] = [1, 2] aserá igual 1e bserá igual 2.

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

é mais legível que:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

Mas eles fazem a mesma coisa.

Usar a atribuição de reestruturação do ES6 : descompactará valores de matrizes ou propriedades de objetos em variáveis ​​distintas.

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

Meu único e essencial uso de vírgula é um loop for:

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

Eu fui aqui para verificar se isso está OK em JavaScript.

Mesmo vendo funcionar, permaneceu uma questão de saber se n é local para a função.

Isso verifica, n é local:

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

Por um momento não tive certeza, alternando entre idiomas.

Embora ambos sejam válidos, o uso do segundo desencoraja desenvolvedores inexperientes de colocar instruções var em todo o lugar e causar problemas de içamento. Se houver apenas um var por função, na parte superior da função, será mais fácil depurar o código como um todo. Isso pode significar que as linhas em que as variáveis ​​são declaradas não são tão explícitas quanto algumas podem desejar.

Eu sinto que a troca vale a pena, se isso significa afastar um desenvolvedor de deixar 'var' em qualquer lugar que eles desejarem.

As pessoas podem reclamar do JSLint, também, mas muito disso é voltado não para corrigir problemas com a linguagem, mas para corrigir os maus hábitos dos codificadores e, portanto, evitar problemas no código que eles escrevem. Portanto:

"Em idiomas com escopo de bloco, geralmente é recomendável que variáveis ​​sejam declaradas no site de primeiro uso. Mas, como o JavaScript não possui escopo de bloco, é mais prudente declarar todas as variáveis ​​de uma função na parte superior da função. recomendado que uma única instrução var seja usada por função ". - http://www.jslint.com/lint.html#scope

Eu acho que é uma questão de preferência pessoal. Eu prefiro fazê-lo da seguinte maneira:

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

Outro motivo para evitar a versão de instrução única ( var única ) é a depuração. Se uma exceção for lançada em qualquer uma das linhas de atribuição, o rastreamento de pilha mostrará apenas uma linha.

Se você tivesse 10 variáveis ​​definidas com a sintaxe da vírgula, não terá como saber diretamente qual foi o culpado.

A versão da declaração individual não sofre com essa ambiguidade.

O conceito de "Coesão sobre acoplamento" pode ser aplicado de maneira mais geral do que apenas objetos / módulos / funções. Também pode servir nesta situação:

O segundo exemplo sugerido pelo OP acoplou todas as variáveis ​​na mesma instrução, o que torna impossível pegar uma das linhas e movê-la para outro lugar sem interromper o material (acoplamento alto). O primeiro exemplo que ele deu torna as atribuições variáveis ​​independentes uma da outra (baixo acoplamento).

"O baixo acoplamento costuma ser um sinal de um sistema de computador bem estruturado e de um bom design, e quando combinado com alta coesão, suporta os objetivos gerais de alta legibilidade e manutenção".

http://en.wikipedia.org/wiki/Coupling_(computer_programming)

Então escolha o primeiro.

Um post antigo, eu sei, mas para adicionar um pequeno detalhe de perspectiva aos colegas Googlers:

O problema de manutenção pode ser facilmente superado com um pouco de formatação, como tal.

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

Eu uso essa formatação estritamente como uma questão de preferência pessoal. Eu pulo esse formato para declarações únicas, é claro, ou onde ele simplesmente anima as obras.

Acredito que antes de começarmos a usar o ES6, a abordagem com uma única declaração var não era boa nem ruim (no caso de você ter linters e 'use strict'. Foi realmente uma preferência de gosto. Mas agora as coisas mudaram para mim. Existem meus pensamentos a favor da declaração multilinha :

1. Agora, temos dois novos tipos de variáveis ​​e nos vartornamos obsoletos. É uma boa prática usar em constqualquer lugar até que você realmente precise let. Frequentemente, seu código conterá declarações de variáveis ​​com atribuição no meio do código e, devido ao escopo do bloco, você frequentemente moverá variáveis ​​entre os blocos em caso de pequenas alterações. Eu acho que é mais conveniente fazer isso com declarações multilinhas.

2. A sintaxe do ES6 tornou-se mais diversificada, obtivemos destruidores, seqüências de modelos, funções de seta e atribuições opcionais. Quando você usa intensamente todos esses recursos com uma única declaração var, isso prejudica a legibilidade.

Eu acho que a primeira maneira (vários vars) é a melhor, pois você pode acabar com isso (a partir de um aplicativo que usa o Knockout), que é difícil de ler na minha opinião:

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });