Declarando Múltiples Variables en JavaScript

En JavaScript, es posible declarar múltiples variables como esta:

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

...o así:

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

¿Es un método mejor / más rápido que el otro?

La primera forma es más fácil de mantener. Cada declaración es una sola declaración en una sola línea, por lo que puede agregar, eliminar y reordenar fácilmente las declaraciones.

Con la segunda forma, es molesto eliminar la primera o la última declaración porque contienen la varpalabra clave y el punto y coma. Y cada vez que agrega una nueva declaración, debe cambiar el punto y coma en la línea anterior a una coma.

Además de la capacidad de mantenimiento, la primera forma elimina la posibilidad de creación de variables globales accidentales:

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

Mientras que la segunda forma es menos indulgente:

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

Es común usar una vardeclaración por ámbito para la organización. La forma en que todos los "ámbitos" siguen un patrón similar que hace que el código sea más legible. Además, el motor los "eleva" a todos a la cima de todos modos. Por lo tanto, mantener sus declaraciones juntas imita lo que realmente sucederá más de cerca.

Es mucho más legible al hacerlo de esta manera:

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

Pero ocupa menos espacio y líneas de código de esta manera:

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

Puede ser ideal para ahorrar espacio, pero deje que los compresores JavaScript lo manejen por usted.

Tal vez asi

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

Excepto cuando se cambia la primera o la última variable, es fácil de mantener y leer.

Es solo una cuestión de preferencia personal. No hay diferencia entre estas dos formas, aparte de unos pocos bytes guardados con el segundo formulario si elimina el espacio en blanco.

ECMAScript6 introdujo la asignación de desestructuración que funciona bastante bien:

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

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

es más legible que:

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

Pero ellos hacen lo mismo.

Use la asignación de Desestructuración de ES6 : Descomprimirá valores de matrices o propiedades de objetos en variables distintas.

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

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

Mi único pero esencial uso de coma está en un bucle for:

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

Fui aquí para buscar si esto está bien en JavaScript.

Incluso viéndolo funcionar, quedó la pregunta de si n es local para la función.

Esto verifica que n es 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 un momento no estaba seguro, cambiando de idioma.

Aunque ambos son válidos, usar el segundo desalienta a los desarrolladores inexpertos de colocar declaraciones var por todas partes y causar problemas de elevación. Si solo hay una var por función, en la parte superior de la función, entonces es más fácil depurar el código como un todo. Esto puede significar que las líneas donde se declaran las variables no son tan explícitas como a algunos les gustaría.

Siento que la compensación vale la pena, si eso significa destetar a un desarrollador de dejar caer 'var' en cualquier lugar que desee.

La gente puede quejarse de JSLint, yo también lo hago, pero gran parte está orientado no a solucionar problemas con el idioma, sino a corregir los malos hábitos de los codificadores y, por lo tanto, a prevenir problemas en el código que escriben. Por lo tanto:

"En los idiomas con alcance de bloque, generalmente se recomienda declarar las variables en el sitio de primer uso. Pero debido a que JavaScript no tiene alcance de bloque, es más inteligente declarar todas las variables de una función en la parte superior de la función. Es recomienda que se use una sola declaración var por función ". - http://www.jslint.com/lint.html#scope

Creo que es una cuestión de preferencia personal. Prefiero hacerlo de la siguiente manera:

   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 */;

Otra razón para evitar la versión de declaración única ( var simple ) es la depuración. Si se lanza una excepción en cualquiera de las líneas de asignación, el seguimiento de la pila muestra solo una línea.

Si tenía 10 variables definidas con la sintaxis de coma, no tiene forma de saber directamente cuál fue el culpable.

La versión de declaración individual no sufre de esta ambigüedad.

El concepto de "Cohesión sobre el acoplamiento" se puede aplicar de manera más general que solo objetos / módulos / funciones. También puede servir en esta situación:

El segundo ejemplo que sugirió el OP ha juntado todas las variables en la misma declaración, lo que hace imposible tomar una de las líneas y moverla a otro lugar sin romper cosas (acoplamiento alto). El primer ejemplo que dio hace que las asignaciones variables sean independientes entre sí (bajo acoplamiento).

"El bajo acoplamiento a menudo es un signo de un sistema informático bien estructurado y un buen diseño, y cuando se combina con una alta cohesión, respalda los objetivos generales de alta legibilidad y facilidad de mantenimiento".

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

Así que elige el primero.

Una publicación antigua, lo sé, pero para agregar un pequeño detalle de perspectiva para los compañeros de Google:

El problema de mantenibilidad puede superarse fácilmente con un poco de formato, como tal.

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

Utilizo este formato estrictamente como una cuestión de preferencia personal. Me salteo este formato para declaraciones individuales, por supuesto, o donde simplemente engulle las obras.

Creo que antes de comenzar a usar ES6, el enfoque con declaración de var única no era bueno ni malo (en caso de que tenga linters y 'use strict'. Fue realmente una preferencia de sabor. Pero ahora las cosas cambiaron para mí. Hay mis pensamientos a favor de la declaración multilínea :

1. Ahora tenemos dos nuevos tipos de variables y quedamos varobsoletos. Es una buena práctica usarlo en consttodas partes hasta que realmente lo necesite let. Muy a menudo, su código contendrá declaraciones de variables con asignación en el medio del código, y debido al alcance del bloque, con bastante frecuencia moverá las variables entre bloques en caso de pequeños cambios. Creo que es más conveniente hacer eso con declaraciones multilínea.

2. La sintaxis de ES6 se volvió más diversa, obtuvimos destructores, cadenas de plantillas, funciones de flecha y asignaciones opcionales. Cuando usa todas esas características con declaraciones de var individuales, perjudica la legibilidad.

Creo que la primera forma (varios vars) es mejor, ya que de lo contrario puede terminar con esto (de una aplicación que usa Knockout), que es difícil de leer en mi opinión:

    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;
        });