Declare multiple variables in JavaScript

Question

I want to declare multiple variables in a function:

function foo() {
    var src_arr     = new Array();
    var caption_arr = new Array();
    var fav_arr     = new Array();
    var hidden_arr  = new Array();
}

Is this the correct way to do this?

var src_arr = caption_arr = fav_arr = hidden_arr = new Array();

Answer 1

Please stay away from that assignment pattern, even if you wanted to have all variables pointing to the same object.

In fact, only the first one will be a variable declaration, the rest are just assignments to possibly undeclared identifiers!

Assigning a value to an undeclared identifier (aka undeclared assignment) is strongly discouraged because, if the identifier is not found on the scope chain, a GLOBAL variable will be created. For example:

function test() {
    // We intend these to be local variables of 'test'.
    var foo = bar = baz = xxx = 5;
    typeof foo; // "number", while inside 'test'.
}
test();

// Testing in the global scope. test's variables no longer exist.
typeof foo; // "undefined", As desired, but,
typeof bar; // "number", BAD!, leaked to the global scope.
typeof baz; // "number"
typeof xxx; // "number"

Moreover, the ECMAScript 5th Strict Mode, disallows this kind of assignments. Under strict mode an assignment made to a non-declared identifier will cause a TypeError exception, to prevent implied globals.

By contrast, here is what we see if written correctly:

function test() {
    // We correctly declare these to be local variables inside 'test'.
    var foo, bar, baz, xxx;
    foo = bar = baz = xxx = 5;
}
test();

// Testing in the global scope. test's variables no longer exist.
typeof foo; // "undefined"
typeof bar; // "undefined"
typeof baz; // "undefined"
typeof xxx; // "undefined"

Answer 2

No, your second statement will create four references to the same array. You want:

var src_arr     = [],
    caption_arr = [],
    fav_arr     = [],
    hidden_arr  = [];

Answer 3

All those variables will refer to one Array object.

Answer 4

For all intents and purposes the literal [] notation syntax should be used. Since the Array constructor is ambiguous in how it deals with its parameters.

From the docs:

If the only argument passed to the Array constructor is an integer between 0 and 232-1 (inclusive), this returns a new JavaScript array with its length property set to that number. And that implies Array of passed length of empty slots with undefined values.

new Array(1, 2, 3); // Result: [1, 2, 3]
new Array(3); // Result: [empty × 3] with undefined at indexes
new Array('3') // Result: ['3']

//this was ambiguous
let x = new Array(5); // Result: [empty × 5]
x.push("Hello"); //expected x as ["Hello", empty, empty, empty, empty]
//Actual x: [empty × 5, "Hello"]

Destructuring syntax:

Another neater way to declare multiple variables is using destructuring assignment which enables unpacking values from arrays, or properties from objects, into distinct variables.

function foo() {
  //destructuring assignment syntax
  let [src_arr, caption_arr, fav_arr, hidden_arr] = [[], [], [], []];

  console.info("Variables::", fav_arr, hidden_arr, caption_arr, src_arr);

  fav_arr.push("fav");
  hidden_arr.push("hidden");

  //After adding some values to couple of arrays
  console.info("Variables::", fav_arr, hidden_arr, caption_arr, src_arr);
}

foo();

Answer 5

there are actually shorter ways to declare multiple variables using JavaScript. First, you can use only one variable keyword (var, let, or const) and declare the variable names and values separated by commas.

const Sam="10yr", Joe="30yr", Bob="15yr", Mary="21yr";