Declaring multiple variables in JavaScript

Question

In JavaScript  it is possible to declare multiple variables like this  var variable1    quot Hello  World  quot   var variable2    quot Testing    quot   var variable3   42      or like this  var variable1    quot Hello  World  quot       variable2    quot Testing    quot       variable3   42   Is one method better faster than the other

User · Answer

It s much more readable when doing it this way   var hey   23  var hi   3  var howdy 4    But takes less space and lines of code this way   var hey 23 hi 3 howdy 4    It can be ideal for saving space  but let JavaScript compressors handle it for you

User · Answer

The maintainability issue can be pretty easily overcome with a little formatting  like such  let   my var1    foo     my var2    bar     my var3    baz     I use this formatting strictly as a matter of personal preference  I skip this format for single declarations  of course  or where it simply gums up the works

User · Answer

The first way is easier to maintain  Each declaration is a single statement on a single line  so you can easily add  remove  and reorder the declarations  With the second way  it is annoying to remove the first or last declaration because they start from the var keyword and finish with the semicolon respectively  Every time you add a new declaration  you have to replace the semicolon in the last old line with a comma

User · Answer

I believe that before we started using ES6  an approach with a single var declaration was neither good nor bad  in case if you have linters and  use strict   It was really a taste preference  But now things changed for me  These are my thoughts in favour of multiline declaration   Now we have two new kinds of variables  and var became obsolete  It is good practice to use const everywhere until you really need let  So quite often your code will contain variable declarations with assignment in the middle of the code  and because of block scoping you quite often will move variables between blocks in case of small changes  I think that it is more convenient to do that with multiline declarations   ES6 syntax became more diverse  we got destructors  template strings  arrow functions and optional assignments  When you heavily use all those features with single variable declarations  it hurts readability

User · Answer

It s just a matter of personal preference  There is no difference between these two ways  other than a few bytes saved with the second form if you strip out the white space

User · Answer

Maybe like this var variable1    quot Hello  World  quot    variable2   2   variable3    quot How are you doing  quot    variable4   42   Except when changing the first or last variable  it is easy to maintain and read

User · Answer

ECMAScript 2015 introduced destructuring assignment which works pretty nice   a  b     1  2   a will equal 1 and b will equal 2

User · Answer

Besides maintainability  the first way eliminates possibility of accident global variables creation   function      var variable1    quot Hello  World  quot     Semicolon is missed out accidentally var variable2    quot Testing    quot      Still a local variable var variable3   42         While the second way is less forgiving   function      var variable1    quot Hello  World  quot     Comma is missed out accidentally     variable2    quot Testing    quot      Becomes a global variable     variable3   42     A global variable as well

User · Answer

Another reason to avoid the single statement version  single var  is debugging  If an exception is thrown in any of the assignment lines the stack trace shows only the one line    If you had 10 variables defined with the comma syntax you have no way to directly know which one was the culprit   The individual statement version does not suffer from this ambiguity

User · Answer

I think it s a matter of personal preference  I prefer to do it in the following way     var    Variables                me   this  that   scope              temp  tempUri  tempUrl              videoId   getQueryString    quot id quot                host   location protocol          location host              baseUrl    quot localhost quot               str    quot Visit W3Schools quot               n   str search  w3schools i               x   5              y   6              z   x   y       End Variables

User · Answer

I think the first way  multiple variables  is best  as you can otherwise end up with this  from an application that uses KnockoutJS   which is difficult to read in my opinion      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    gt  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   quot GET quot                   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

User · Answer

Although both are valid  using the second discourages inexperienced developers from placing var statements all over the place and causing hoisting issues   If there is only one var per function  at the top of the function  then it is easier to debug the code as a whole   This can mean that the lines where the variables are declared are not as explicit as some may like  I feel that trade-off is worth it  if it means weaning a developer off of dropping  var  anywhere they feel like  People may complain about JSLint  I do as well  but a lot of it is geared not toward fixing issues with the language  but in correcting bad habits of the coders and therefore preventing problems in the code they write  Therefore    quot In languages with block scope  it is usually recommended that variables be declared at the site of first use  But because JavaScript does not have block scope  it is wiser to declare all of a function s variables at the top of the function  It is recommended that a single var statement be used per function  quot  - http   www jslint com lint html scope

User · Answer

Use the ES6 destructuring assignment  It will unpack values from arrays  or properties from objects  into distinct variables   x000D   x000D  let  variable1   variable2  variable3      Hello  World     Testing      42    console log variable1      Hello  World  console log variable2      Testing    console log variable3      42 x000D   x000D   x000D

User · Answer

It s common to use one var statement per scope for organization   The way all  scopes  follow a similar pattern making the code more readable   Additionally  the engine  hoists  them all to the top anyway   So keeping your declarations together mimics what will actually happen more closely

User · Answer

My only  yet essential  use for a comma is in a for loop  for  var i   0  n   a length  i  lt  n  i        var e   a i     console log e      I went here to look up whether this is OK in JavaScript  Even seeing it work  a question remained whether n is local to the function  This verifies n is local  a    3  5  7  11    function l      for  var i   0  n   a length  i  lt  n  i        var e   a i     console log e           console log typeof n     quot undefined quot       quot as expected  n was local quot     quot oops  n was global quot     For a moment I wasn t sure  switching between languages

User · Answer

var variable1    quot Hello  World  quot   var variable2    quot Testing    quot   var variable3   42   is more readable than  var variable1    quot Hello  World  quot       variable2    quot Testing    quot       variable3   42   But they do the same thing

User · Answer

The concept of  quot cohesion over coupling quot  can be applied more generally than just objects modules functions  It can also serve in this situation  The second example the OP suggested has coupled all the variables into the same statement  which makes it impossible to take one of the lines and move it somewhere else without breaking stuff  high coupling   The first example he gave makes the variable assignments independent of each other  low coupling   From Coupling   Low coupling is often a sign of a well-structured computer system and a good design  and when combined with high cohesion  supports the general goals of high readability and maintainability   So choose the first one

[javascript] Declaring multiple variables in JavaScript

Examples related to javascript

Examples related to variables

Examples related to coding-style

Examples related to performance

Examples related to declaration