Assign Multiple Variables to the Same Value in JavaScript

Sometimes you may need to assign the same value to multiple variables. In this article, I will show you exactly how to assign the same value to multiple variables using different methods.

Method 1: Using the equal sign (=) consecutively

You can set multiple variables to the same value in JavaScript by using the equal sign (=) consecutively between the variable names and assigning a single value at the end when declaring the variables.

For example:

var a = b = c = 10;

The above code is equivalent to

var c = 10;
var b = c;
var a = b;

You can also declare the variables first and assign the value later.

For example:

var a, b, c;
a = b = c = 10;

You can also use the ‘let’ or ‘const’ keyword instead of ‘var’ to create variables.

For example:

let a = b = c = 10;

const a = b = c = 10;

You can also create an undeclared variable without using any keywords.

For example:

a = b = c = 10;

If you want to assign different values to different variables, you can also do that using the syntax below.

var a = 2;
var b = 3;

We can also assign different values to different variables in the same line of code.

For example:

var a = 2, b = 3;

After assigning the same value to multiple variables, if we update any of the variables, it will not affect others.

In the example below, variables a, b, and c are assigned to 10 initially and then b is changed to 20.

var a = b = c = 10;
b = 20;
console.log(a);
console.log(b);
console.log(c);

As you can see from the above example, only the value of variable b is changed to 20. Variables a and c are not affected when we update the value of variable b because all variables a, b, and c are assigned with a primitive value.

Variables assigned with primitive values like a number, string, boolean, bigint, undefined, symbol, and null get replaced when a new value is assigned to the same variable because primitive values are immutable. i.e. the value itself cannot be altered but the variable can be replaced. Same is not the case for non-primitive values.

You need to be very careful when assigning the same non-primitive value like array, function, and objects to multiple variables because non-primitive values are mutable. i.e. the value itself can be altered. So the value itself will be changed instead of the variable getting replaced.

If you use the equal sign (=) consecutively to create multiple variables with the same non-primitive value. If you update the value of one variable, the value of all the variables will be updated too.

For example:

var a = b = [1, 2, 3];
console.log("a: " + a);
console.log("b: " + b);
b[0] = 44;
console.log("a: " + a);
console.log("b: " + b);

As you can see from the above example that if we update the value of variable a, the value of both variables will be updated. This happens because both variables a and b points to the same array object. And if we update the value of one variable the others get affected too.

So if you want to handle them separately then you need to assign them separately.

var a = [1, 2, 3];
var b = [1, 2, 3];
b[0] = 22;
console.log("a: " + a);
console.log("b: " + b);

Method 2: Using the destructuring assignment syntax

Destructuring assignment syntax is a javascript expression that helps us to unpack values from arrays or objects into different variables.

For example:

var name = ["John", "Doe"];
var ["firstName", "lastName"] = name;

// Above destructuring syntax sets
// firstName = name[0];
// lastName = name[1];

console.log(firstName);
console.log(lastName);

We can also assign multiple values to the same value using destructuring assignment syntax combined with the fill function.

var [a, b, c] = Array(3).fill(22);
console.log("a: " + a);
console.log("b: " + b);
console.log("c: " + c);