Déclaration de plusieurs variables en JavaScript

En JavaScript, il est possible de déclarer plusieurs variables comme ceci:

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

... ou comme ça:

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

Une méthode est-elle meilleure / plus rapide que l'autre?

La première façon est plus facile à entretenir. Chaque déclaration est une instruction unique sur une seule ligne, vous pouvez donc facilement ajouter, supprimer et réorganiser les déclarations.

Avec la deuxième façon, il est ennuyeux de supprimer la première ou la dernière déclaration car elles contiennent le varmot-clé et le point-virgule. Et chaque fois que vous ajoutez une nouvelle déclaration, vous devez remplacer le point-virgule de l'ancienne ligne par une virgule.

Outre la maintenabilité, la première façon élimine la possibilité de création de variables globales accidentelles:

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

Alors que la deuxième façon est moins indulgente:

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

Il est courant d'utiliser une varinstruction par étendue pour l'organisation. La façon dont toutes les «étendues» suivent un modèle similaire, ce qui rend le code plus lisible. De plus, le moteur les «hisse» tous au sommet de toute façon. Donc, garder vos déclarations ensemble imite ce qui se passera réellement de plus près.

C'est beaucoup plus lisible lorsque vous le faites de cette façon:

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

Mais prend moins d'espace et de lignes de code de cette façon:

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

Il peut être idéal pour économiser de l'espace, mais laissez les compresseurs JavaScript le gérer pour vous.

Peut-être comme ça

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

Sauf lors du changement de la première ou de la dernière variable, il est facile à maintenir et à lire.

C'est juste une question de préférence personnelle. Il n'y a aucune différence entre ces deux façons, à l'exception de quelques octets enregistrés avec le second formulaire si vous supprimez l'espace blanc.

ECMAScript6 a introduit une affectation de déstructuration qui fonctionne plutôt bien:

[a, b] = [1, 2] asera égal 1et bsera égal 2.

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

est plus lisible que:

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

Mais ils font la même chose.

Utilisez l' affectation ES6 Destructuring : il décompactera les valeurs des tableaux ou les propriétés des objets dans des variables distinctes.

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

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

Ma seule utilisation, pourtant essentielle, de la virgule est dans une boucle for:

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

Je suis allé ici pour vérifier si cela est OK en JavaScript.

Même en le voyant fonctionner, il restait à savoir si n est local à la fonction.

Cela vérifie, n est 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");

Pendant un moment, je n'étais pas sûr de passer d'une langue à l'autre.

Bien que les deux soient valides, l'utilisation de la seconde décourage les développeurs inexpérimentés de placer des instructions var partout et de provoquer des problèmes de levage. S'il n'y a qu'une seule var par fonction, en haut de la fonction, il est plus facile de déboguer le code dans son ensemble. Cela peut signifier que les lignes où les variables sont déclarées ne sont pas aussi explicites que certains le souhaiteront.

Je pense que le compromis en vaut la peine, si cela signifie sevrer un développeur de la suppression de «var» partout où il le souhaite.

Les gens peuvent se plaindre de JSLint, je le fais aussi, mais une grande partie n'est pas destinée à résoudre les problèmes de langage, mais à corriger les mauvaises habitudes des codeurs et donc à prévenir les problèmes dans le code qu'ils écrivent. Par conséquent:

"Dans les langages à portée de bloc, il est généralement recommandé de déclarer les variables sur le site de première utilisation. Mais comme JavaScript n'a pas de portée de bloc, il est plus judicieux de déclarer toutes les variables d'une fonction en haut de la fonction. recommandé d'utiliser une seule instruction var par fonction. " - http://www.jslint.com/lint.html#scope

Je pense que c'est une question de préférence personnelle. Je préfère le faire de la manière suivante:

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

Une autre raison pour éviter la version à instruction unique ( var unique ) est le débogage. Si une exception est levée dans un des lignes d'affectation, la trace de pile n'affiche qu'une seule ligne.

Si vous aviez 10 variables définies avec la syntaxe virgule, vous n'avez aucun moyen de savoir directement laquelle était la coupable.

La version de déclaration individuelle ne souffre pas de cette ambiguïté.

Le concept de "Cohésion sur Couplage" peut être appliqué plus généralement que de simples objets / modules / fonctions. Il peut également servir dans cette situation:

Le deuxième exemple suggéré par l'OP a couplé toutes les variables dans la même instruction, ce qui rend impossible de prendre une des lignes et de la déplacer ailleurs sans casser des trucs (couplage élevé). Le premier exemple qu'il a donné rend les affectations variables indépendantes les unes des autres (couplage faible).

"Un faible couplage est souvent le signe d'un système informatique bien structuré et d'une bonne conception, et lorsqu'il est combiné à une cohésion élevée, il soutient les objectifs généraux de haute lisibilité et maintenabilité."

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

Alors choisissez le premier.

Un vieux post, je sais, mais pour ajouter un petit détail de perspective pour les autres Googleurs:

Le problème de maintenabilité peut être assez facilement résolu avec un peu de mise en forme, comme tel.

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

J'utilise cette mise en forme uniquement par préférence personnelle. Je saute ce format pour les déclarations simples, bien sûr, ou où cela résume simplement les travaux.

Je crois qu'avant de commencer à utiliser ES6, l'approche avec une seule déclaration var n'était ni bonne ni mauvaise (dans le cas où vous avez des linters et 'use strict'. C'était vraiment une préférence gustative. Mais maintenant les choses ont changé pour moi. Mes pensées sont en faveur de la déclaration multiligne :

1. Nous avons maintenant deux nouveaux types de variables et nous sommes vardevenus obsolètes. Il est recommandé de l'utiliser constpartout où vous en avez vraiment besoin let. Donc, très souvent, votre code contiendra des déclarations de variables avec une affectation au milieu du code, et en raison de la portée des blocs, vous déplacerez assez souvent des variables entre les blocs en cas de petits changements. Je pense qu'il est plus pratique de le faire avec des déclarations multilignes.

2. La syntaxe ES6 est devenue plus diversifiée, nous avons obtenu des destructeurs, des chaînes de modèle, des fonctions fléchées et des affectations facultatives. Lorsque vous utilisez fortement toutes ces fonctionnalités avec des déclarations var simples, cela nuit à la lisibilité.

Je pense que la première façon (plusieurs vars) est la meilleure, car vous pouvez sinon vous retrouver avec cela (à partir d'une application qui utilise Knockout), qui est difficile à lire à mon avis:

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