Declaring multiple variables in JavaScript

Viewed 426622

In JavaScript, it is possible to declare multiple variables like this:

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

...or like this:

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

Is one method better/faster than the other?

19 Answers

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.

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.

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

is more readable than:

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

But they do the same thing.

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.

As everyone has stated it is largely preference and readability, but I'll throw a comment on the thread since I didn't see others share thoughts in this vein

I think the answer to this question is largely dependent on what variables you're setting and how they're related. I try to be consistent based on if the variables I'm creating are related or not; my preference generally looks something like this:

For unrelated variables

I single-line them so they can be easily moved later; I personally would never declare unrelated items any other way:

const unrelatedVar1 = 1;
const unrelatedVar2 = 2;
const unrelatedVar3 = 3;

For related things (utility)

If I'm creating new variables I declare as a block -- this serves as a hint that the attributes belong together

const
  x = 1,
  y = 2,
  z = 3
;

// or
const x=1, y=2, z=3;

// or if I'm going to pass these params to other functions/methods
const someCoordinate = {
  x = 1,
  y = 2,
  z = 3
};

this, to me, feels more consistent with de-structuring:

const {x,y,z} = someCoordinate;

where it'd feel clunky to do something like (I wouldn't do this)

const x = someCoordiante.x;
const y = someCoordiante.y;
const z = someCoordiante.z;

For related things (construction)

If multiple variables are created with the same constructor I'll often group them together also; I personally find this more readable

Instead of something like (I don't normally do this)

const stooge1 = Person("moe");
const stooge2 = Person("curly");
const stooge3 = Person("larry");

I'll usually do this:

const [stooge1, stooge2, stooge3] = ["moe", "curly", "larry"].map(Person);

I say usually because if the input params are sufficiently long that this becomes unreadable I'll split them out.

I agree with other folk's comments about use-strict

A person with c background will definitely use the second method

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

the above method is more look like in c language

Related