Declarar múltiples variables en JavaScript

Question

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

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

... o como esto:

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

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

Answer 1

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

Con la segunda manera, es molesto para eliminar la primera o la última declaración, ya que contienen la palabra clave var y coma. Y cada vez que se agrega una nueva declaración, usted tiene que cambiar el punto y coma en la antigua línea de una coma.

Answer 2

Además de mantenibilidad, la primera forma elimina la posibilidad de accidentes creación de variables globales:

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

Mientras que la segunda manera 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
}());

Answer 3

Es común el uso de uno var comunicado por el alcance para la organización. La forma en todos "alcances" siguen un patrón similar de hacer el código más legible. Además, el motor "iza" a todos ellos a la parte superior de todos modos. Por lo que mantener sus declaraciones junto imita lo que realmente va a pasar más de cerca.

Answer 4

Es mucho más fácil de leer cuando se hace de esta manera:

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

Sin embargo, ocupa menos espacio y las líneas de código de esta manera:

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

Puede ser ideal para ahorrar espacio, pero dejar que los compresores de JavaScript lo hagan por ti.

Answer 5

Es sólo una cuestión de preferencia personal. No hay ninguna diferencia entre estas dos formas, aparte de unos pocos bytes guardados con la segunda forma, si se tira a cabo el espacio en blanco.

Answer 6

Tal como esto

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.

Answer 7

ECMAScript6 introducted asignación desestructurada que funciona bastante bien:

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

Answer 8

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

es más fácil de leer que:

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

Pero ellos hacen lo mismo.

Answer 9

Uso ES6 < strong> asignación desestructurada :. será desempaquetar los valores de las matrices, o propiedades de los 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

Answer 10

Mi único uso, sin embargo, es esencial para la coma en un bucle:

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

Me fui a mirar hacia arriba si esto está bien en JavaScript.

A pesar de ver que funcione, una pregunta sigue siendo si n es local a la función.

Esto verifica, 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, el cambio entre idiomas.

Answer 11

A pesar de que ambos son válidos, usando la segunda desalienta a los desarrolladores sin experiencia de la colocación de las declaraciones var por todo el lugar y causando problemas de elevación. Si sólo hay una var por función, en la parte superior de la función, entonces es más fácil para depurar el código en su conjunto. Esto puede significar que las líneas en las que se declaran las variables no son tan explícitos como algunos les puede gustar.

Me siento esa compensación vale la pena, si esto significa destete un desarrollador fuera de dejar caer 'var' en cualquier lugar que se sienten como.

Las personas pueden quejarse de JSLint, yo también, pero muchos de ellos no se orienta hacia los temas de fijación con el idioma, pero en la corrección de malos hábitos de los codificadores y por lo tanto la prevención de los problemas en el código que escriben. Por lo tanto:

"En idiomas con ámbito de bloque, se recomienda generalmente que las variables se declararán en el lugar de su primer uso. Pero debido a que JavaScript no tiene ámbito de bloque, es más prudente para declarar todas las variables de una función en la parte superior de la función . se recomienda que una sola sentencia var ser utilizado por la función ". - http://www.jslint.com/lint.html#scope

Answer 12

Creo que es una cuestión de preferencia personal. Yo 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 */;

Answer 13

Otra razón para evitar la versión declaración única (single var ) está depurando. Si se produce una excepción en cualquier de las líneas de asignación del seguimiento de la pila muestra sólo la de una línea.

Si tuviera 10 variables definidas con la sintaxis de coma que no hay manera de saber directamente cuál era el culpable.

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

Answer 14

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

El segundo ejemplo el PO ha sugerido acoplada todas las variables en la misma declaración, que hace que sea imposible tomar una de las líneas y moverlo a otro lugar sin romper cosas (alta acoplamiento). El primer ejemplo que dio hace que las asignaciones de variables independientes el uno del otro (acoplamiento de baja).

"acoplamiento baja es a menudo una señal de un sistema informático bien estructurada y un buen diseño, y cuando se combina con una alta cohesión, es compatible con los objetivos generales de alta legibilidad y facilidad de mantenimiento."

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

Así que elige la primera.

Answer 15

Creo que antes de empezar a usar ES6, enfoque con la declaración var sola no era ni bueno ni malo (en el caso si usted tiene linters y 'use strict'. Fue realmente preferencia de sabor. Pero ahora las cosas cambiaron para mí. No son mis pensamientos en favor de la declaración de varias líneas:

1. Ahora tenemos dos nuevos tipos de variables, y var llegó a ser obsoleta. Es una buena práctica utilizar const todas partes hasta que usted realmente necesita let. Así que muy a menudo su código contendrá declaraciones de variables con assigment en el medio del código, y debido a que el bloque de alcance muy a menudo se moverá variables entre los bloques en el caso de pequeños cambios. Creo que es más conveniente hacer eso con las declaraciones de varias líneas.

2. sintaxis ES6 se hizo más diversa, llegamos destructores, cadenas de la plantilla, las funciones de dirección y Traspaso opcionales. Cuando se usa mucho todos que cuenta con declaraciones var individuales duele legibilidad.

Answer 16

Un puesto de edad, lo sé, pero para añadir un pequeño detalle de la perspectiva de los demás empleados de Google:

El problema de mantenimiento puede ser bastante fácil de superar con un poco de formato, como tales.

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

Yo uso este formato estrictamente como una cuestión de preferencia personal. Me salto este formato para las declaraciones individuales, por supuesto, o en los que simplemente se pega a las obras.

Answer 17

Creo que la primera forma (múltiples VARs) es mejor, ya que de lo contrario puede terminar con esta (de una aplicación que utiliza 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;
        });