Declarando Múltiples Variables en JavaScript

334

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?

Steve Harrison
fuente
66
En cuanto a más rápido , usando este jsperf no pude ver una ganancia de velocidad constante usando un método u otro.
Majid Fouladpour

Respuestas:

345

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.

Jeremy Ruten
fuente
67
Si está escribiendo código que espera minimizar o empacar más tarde, la segunda forma permite que los compresores (como el YUI Compressor) le brinden una versión más minificada. Si el tamaño es una consideración, entonces sugeriría seguir tantas sugerencias de JSLint como sea posible.
Carril
36
jslint afirma que la segunda forma es más justa, pero no estoy de acuerdo.
ThatGuy
29
La segunda forma es una microoptimización. Todas las declaraciones var se procesan a la vez, en lugar de una a la vez. Esto no importa mucho en los navegadores modernos / computadoras modernas.
webnesto
18
@ 0xc0de: Me gustaría ver la prueba de declarar todas las variables en una declaración como "eficientes". Si solo está midiendo la eficiencia en función de los pocos bytes guardados, entonces tal vez. Pero si tiene en cuenta la legibilidad y la facilidad de mantenimiento, creo que encontrará que la optimización prematura suele ser el camino equivocado, especialmente porque los navegadores modernos recopilarán e inicializarán todas las variables en un alcance en un pase previo a la ejecución. Personalmente, encuentro que todas las variables se declaran en una sola línea o declaración para que la comprensión rápida del código sea más difícil y más propensa a errores.
ogradyjd
99
Con respecto a la eficiencia, tanto uglifyjs como el compilador de cierre de Google automáticamente apiñarán las declaraciones var secuenciales en una, lo que hará que ese punto sea discutible (por lo que puedo decir, YUI no hará esto, sin embargo, no lo he probado exhaustivamente).
bhuber
215

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
}());
Kenny Ki
fuente
44
Buen punto. Si son cortos, a continuación, escribir en una sola línea evitará este problema: var variable1 = "Hello World!", variable2 = "Testing...", variable3 = 42;. Un desaparecido ,se bloqueará, pero estoy de acuerdo en que es arriesgado
Aram Kocharyan
14
Si está utilizando el modo estricto, no podrá crear globales como este de todos modos.
Danyal Aytekin
1
Soy fanático de declarar múltiples variables en una sola línea porque creo que se ve más limpio. Dicho esto, declarar accidentalmente variables globales es un peligro real. Mientras buscaba pérdidas de memoria, me encontré con varias instancias en las que accidentalmente declaró varias variables globales a la vez porque usaba un punto y coma en lugar de una coma.
smabbott
+1 solo pasó la mitad del día e incluso comenzó a preguntarse por qué hay una diferencia indocumentada entre estas dos declaraciones. Luego lea esta respuesta, verificó el código con mucho cuidado y encontró el error. Necesita unas vacaciones ...
Giedrius
1
Mi editor de texto me da un mensaje Possible Fatal Errorsi extraño un coma, ¡hurra por mí!
33

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.

spencer.sm
fuente
66
Puede mantener las declaraciones juntas sin hacer que compartan la misma declaración 'var'. Entiendo y acepto las explicaciones dadas en jslint (su enlace) pero no comparto la conclusión. Como se dijo anteriormente, es más cuestión de estilo que cualquier otra cosa. En el mundo Java (entre otros), se recomienda el reverso (una declaración por línea) para facilitar la lectura.
PhiLho
¿Más legible? La única razón por la que las personas los ponen en una línea es la razón específica de JS que mencionó: JS mueve todas las declaraciones a la parte superior. Si no hiciera eso, todos estaríamos declarando nuestros vars más cercanos al punto donde se usan.
Danyal Aytekin
@ vol7ron ese no es el caso, y es un gran malentendido de la vardeclaración. Todo lo contrario es cierto. vea la documentación y este ejemplo
jackweirdy
@jackweirdy tiene razón y fue el caso, una implementación deficiente o un error en los navegadores más antiguos. Desde entonces he eliminado mi comentario.
vol7ron
29

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.

Jason Stackhouse
fuente
15

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.

Joe Nerdan
fuente
66
Por lo general, usando comas primero, el punto y coma pasa a una nueva línea para evitar ese problema. var variable1 = "hola mundo" \ n, variable2 = 2 \ n, variable3 = "¿cómo estás?" \ n, variable4 = 42 \ n; \ n
BrianFreud
2
Esta es la sintaxis de Haskell. Siento que de alguna manera no es recomendable / práctica común en javascript
shamanSK
14

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.

Brian Campbell
fuente
El segundo guarda un par de bytes.
Sophie Alpert
Ben Alpert: ¿Cómo te imaginas?
Josh Stodola
Si elimina el espacio en blanco, entonces 'var foo = "hello", bar = "world";' la declaración ocupa menos caracteres que 'var foo = "hello"; var bar = "world";' Si tiene un sitio popular, puede ser útil guardar algunos bytes en el JS (también debería minimizar los nombres de variables, etc.)
Brian Campbell
Veo que los bytes guardados son irrelevantes en este momento, debido al aumento de los minificadores de JavaScript, especialmente el modo simple del compilador de Google Closer (llamado).
Bryan Field
1
@webnesto nunca hay rendimiento de la sintaxis cuando la semántica de la sintaxis es la misma. Uno no ejecutará el código de inmediato, sino que primero lo analizará y hará un análisis semántico: aquí es donde se igualan ambos estilos de declaración.
Esailija
14

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

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

Nir Naor
fuente
no responde la pregunta, pero puede ser una mejor alternativa a los dos enfoques descritos.
svarog
1
Creo que su enfoque no es realmente viable en caso de que tenga listas largas de variables. Es difícil decir con qué variable está relacionado el valor y tampoco tiene protección contra errores en caso de fusión incorrecta durante la cual accidentalmente podría eliminar un elemento de una matriz. Ejemplo: let [aVar, bVar, cVar, xVar, yVar, zVar] = [10, 20, 30, 40, 50]; Entonces, personalmente no lo recomiendo.
Kirill Reznikov
1
útil si quieres establecer muchas variables con los mismos valores. Usando para restablecer a cero en un bucle, por ejemplo.
Nick
¡Si! Esto es lo que estaba buscando. Especialmente si desea definir un par bidimensional o valores multidimensionales, pero no matrices.
Eugene Kardash
11
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.

Kevin Crowell
fuente
Utiliza menos "espacio de archivo"? Creo que tienes algunas explicaciones que hacer.
Josh Stodola
@JoshStodola me parece el mismo espacio de archivo. Desde entonces var<space>, es<space><space><space><space>
WORMSS
@WORMSS a menos que sea var<space>o var<tab>vs <tab>. Todavía en gran parte discutible.
mpag
9

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

Rohit Jindal
fuente
44
Es una idea terrible, especialmente si necesita asignar alrededor de 10 variables.
Kirill Reznikov
7

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.

codelion
fuente
7

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

Wade Harrell
fuente
6

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 */;
v1r00z
fuente
6

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.

Shawn
fuente
2

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.

Magne
fuente
1
No veo cómo se relaciona esto con el acoplamiento o la cohesión. ¿Cuidado para elaborar?
Edson Medina
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).
Magne
¡El acoplamiento se trata de la interdependencia entre diferentes módulos / objetos / funciones, NO líneas de código!
Edson Medina
1
Originalmente se trataba de módulos, sí, pero el concepto se puede aplicar de manera más general, como muestra incluso su propia inclusión de objetos / funciones en la definición.
Magne
2

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.

Galán
fuente
1

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.

Kirill Reznikov
fuente
0

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