Multiple Variable Assignment in JavaScript

1. Use the = Operator to Assign Multiple Variable in JavaScript
2. Multiple Variable Assignment Using Destructuring Assignment With fill() Function in JavaScript

This tutorial explains multiple variable assignments in JavaScript because variables are the most important part of our coding.

Sometimes, we have to do many variable declarations and assignments as they have the same value. How? Let’s understand.

Use the = Operator to Assign Multiple Variable in JavaScript

Assume we have variable1, variable2, and variable3 and want all three variables to have a value of 1.

var variable1 = 1, variable2 = 1, variable3 = 1;
console.log(variable1, variable2, variable3);  // 1,1,1

var variable1 = variable2 = variable3 = 1;
console.log(variable1, variable2, variable3);  // 1,1,1

Output:

1, 1, 1
1, 1, 1

They seem equivalent, but they are not. The reason is variables’ scope and assignment precedence.

The assignment operator is right-associative in JavaScript, which means it parses the left-most after parsing the right-most.

Let’s have another example to understand variable scope and assignment precedence.

function test1() {
  var variable1 = 1, variable2 = 1, varialbe3 = 1;
}

function test2() {
  var varialbe1 = variable2 = varialbe3 = 1;
}

test1();
console.log(window.variable2);  // undefined

test2();
console.log(window.variable2);  // 1. Aggh!

Output:

undefined
1

Focus on the code and see that variable1, variable2, and variable3 are in function scope and local to the test1().

They are not available outside of test1() method that’s why returning undefined. Here, var variable1 = 1, variable2 = 1, varialbe3 = 1; is equivalent to var variable1 = 1; var variable2 = 1; var varialbe3 = 1;.

Now, observe the test2() function. The variable1 is in function scope due to the var keyword, but variable2 and variable3 are leaking because they are not written with the var keyword.

They are globally accessible outside the test2() function. Remember that the variable declarations are hoisted only.

However, the precedence is right-associative which means var variable1 = (window.variable2 =(window.variable3 = 1));.

Which Means the variable3 will be assigned to 1 first, then the value of variable3 will be allocated to variable2, and lastly, the value of variable2 will be assigned to variable1.

To avoid a variable leak in test2(), we can split the variable declaration and assignment into two separate lines. In this way, we can restrict variable1, variable2, and variable3 to test2() function scope.

function test1() {
  var variable1 = 1, variable2 = 1, varialbe3 = 1;
}

function test2() {
  var variable1, variable2, variable3;
  variable1 = variable2 = variable3 = 1;
}

test1();
console.log(window.variable2);  // undefined

test2();
console.log(window.variable2);  // undefined

Output:

undefined
undefined

Multiple Variable Assignment Using Destructuring Assignment With fill() Function in JavaScript

function test() {
  var [a, b, c, d] = Array(4).fill(1);
  console.log(a, b, c, d)  // 1, 1, 1, 1
}
test();
console.log(window.a);  // undefined

Output:

1, 1, 1, 1
undefined

The destructuring assignment helps in assigning multiple variables with the same value without leaking them outside the function.

The fill() method updates all array elements with a static value and returns the modified array. You can read more about fill() here.