web-dev-qa-db-fra.com

Déclarer 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 ceci:

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

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

javascriptvariablescoding-styleperformancedeclaration
312
Steve Harrison

Le premier moyen est plus facile à maintenir. Chaque déclaration est une déclaration unique sur une seule ligne. Vous pouvez donc facilement ajouter, supprimer et réorganiser les déclarations.

Dans le deuxième cas, il est ennuyeux de supprimer la première ou la dernière déclaration, car elles contiennent le mot clé var et un 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.

320
Jeremy Ruten

Outre la maintenabilité, le premier moyen é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 seconde 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
}());
204
Kenny Ki

Il est courant d'utiliser ne instruction var par portée pour l'organisation. La façon dont toutes les "portées" suivent un modèle similaire rendant 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.

33
user215871

C'est beaucoup plus lisible quand on le fait de cette façon:

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

Mais prend moins de place 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.

27
Jason Stackhouse

C'est juste une question de préférence personnelle. Il n'y a pas de différence entre ces deux manières, à part quelques octets enregistrés avec le second formulaire si vous supprimez l'espace blanc.

14
Brian Campbell

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 à gérer et à lire.

13
joe nerdan

ECMAScript6 introduit mission de déstructuration ce qui fonctionne bien, Nice:

[a, b] = [1, 2]a sera égal à 1 et b sera égal à 2.

12
Nir Naor
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.

11
Kevin Crowell

Utilisez ES6 Affectation de destruction : décompressez les valeurs des tableaux, ou les propriétés des objets, en variables distinctes.

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

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

Mon seul, mais essentiel usage de 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 rechercher si cela est OK en JavaScript.

Même en le voyant fonctionner, il restait à déterminer si n était local.

Ceci vérifie que 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 pouvoir changer de langue.

7
codelion

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 causer des problèmes de levage. S'il n'y a qu'une seule variable par fonction, en haut de la fonction, il est alors plus facile de déboguer le code dans son ensemble. Cela peut signifier que les lignes dans lesquelles les variables sont déclarées ne sont pas aussi explicites que certains l’aimeraient.

J’estime que le compromis en vaut la peine, si cela signifie que l’on veuille dissocier un développeur de laisser tomber "var" partout où il le souhaite.

Les gens peuvent se plaindre de JSLint, je le fais aussi, mais la plupart d'entre eux sont orientés non pas vers la résolution de problèmes liés à la langue, mais pour la correction des mauvaises habitudes des codeurs et, partant, pour la prévention des problèmes liés au code qu'ils écrivent. Donc:

"Dans les langues à 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 sage de déclarer toutes les variables d’une fonction en haut de la fonction. Il est recommandé d’utiliser une seule instruction var par fonction. " - http://www.jslint.com/lint.html#scope

6
Wade Harrell

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

Une autre raison d'éviter la version d'instruction unique (single var) est le débogage. Si une exception est levée dans any des lignes d’attribution, la trace de la pile n’indique qu’une seule ligne.

Si vous avez défini 10 variables avec la syntaxe par virgule, vous ne pouvez pas savoir directement quelle est la cause.

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

3
shawn

Le concept de "cohésion sur couplage" peut être appliqué de manière plus générale que de simples objets/modules/fonctions. Il peut également servir dans cette situation:

Le deuxième exemple suggéré par le PO a couplé toutes les variables dans le même énoncé, ce qui rend impossible de prendre l’une des lignes et de la déplacer ailleurs sans casser des éléments (couplage élevé). Le premier exemple qu'il a donné rend les affectations de 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. Combiné à une cohésion élevée, il contribue à la réalisation des objectifs généraux de lisibilité et de maintenabilité."

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

Alors, choisissez le premier.

2
Magne

Je pense qu'avant d'utiliser ES6, l'approche avec déclaration unique n'était ni bonne ni mauvaise (au cas où vous auriez des linters et 'use strict'. C'était vraiment une préférence de goût. Mais maintenant, les choses ont changé pour moi. en faveur de la déclaration multiligne:

  1. Nous avons maintenant deux nouveaux types de variables et var est devenu obsolète. Il est recommandé d’utiliser const partout où vous n’avez pas vraiment besoin de let. Donc, assez souvent, votre code contiendra des déclarations de variable avec l'assigment 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 petites modifications. Je pense qu’il est plus pratique de le faire avec des déclarations multilignes.

  2. La syntaxe ES6 est devenue plus diverse, nous avons eu des destructeurs, des chaînes de templates, des fonctions de flèches et des assignations optionnelles. Lorsque vous utilisez abondamment toutes ces fonctionnalités avec des déclarations à variable unique, la lisibilité en pâtit.

1
Kirill Reznikov

Un ancien billet, je le sais, mais pour ajouter un petit détail de perspective aux autres Googlers:

Le problème de la maintenabilité peut être facilement résolu avec un petit formatage, comme celui-ci.

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

J'utilise cette mise en forme strictement par préférence personnelle. Je saute ce format pour les déclarations uniques, bien sûr, ou pour tout ce qui gomme les travaux.

1
Beau

Je pense que le premier moyen (plusieurs vars) est le meilleur, sinon vous pouvez vous retrouver avec cela (à partir d'une application qui utilise Knockout), ce 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;
        });
0
vegemite4me