Assign multiple variables to the same value in Javascript?

Javascript

Javascript Problem Overview


I have initialized several variables in the global scope in a JavaScript file:

var moveUp, moveDown, moveLeft, moveRight;
var mouseDown, touchDown;

I need to set all of these variables to false. This is the code I currently have:

moveUp    = false;
moveDown  = false;
moveLeft  = false;
moveRight = false
mouseDown = false;
touchDown = false;

Is there any way that I can set all of these variables to the same value in one line of code, or is the code I currently have the best way to do this?

Javascript Solutions


Solution 1 - Javascript

Nothing stops you from doing

moveUp = moveDown = moveLeft = moveRight = mouseDown = touchDown = false;

Check this example

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

Solution 2 - Javascript

Nothing stops you from doing the above, but hold up!

There are some gotchas. Assignment in Javascript is from right to left so when you write:

var moveUp = moveDown = moveLeft = moveRight = mouseDown = touchDown = false;

it effectively translates to:

var moveUp = (moveDown = (moveLeft = (moveRight = (mouseDown = (touchDown = false)))));

which effectively translates to:

var moveUp = (window.moveDown = (window.moveLeft = (window.moveRight = (window.mouseDown = (window.touchDown = false)))));

Inadvertently, you just created 5 global variables--something I'm pretty sure you didn't want to do.

Note: My above example assumes you are running your code in the browser, hence window. If you were to be in a different environment these variables would attach to whatever the global context happens to be for that environment (i.e., in Node.js, it would attach to global which is the global context for that environment).

Now you could first declare all your variables and then assign them to the same value and you could avoid the problem.

var moveUp, moveDown, moveLeft, moveRight, mouseDown, touchDown;
moveUp = moveDown = moveLeft = moveRight = mouseDown = touchDown = false;

Long story short, both ways would work just fine, but the first way could potentially introduce some pernicious bugs in your code. Don't commit the sin of littering the global namespace with local variables if not absolutely necessary.


Sidenote: As pointed out in the comments (and this is not just in the case of this question), if the copied value in question was not a primitive value but instead an object, you better know about copy by value vs copy by reference. Whenever assigning objects, the reference to the object is copied instead of the actual object. All variables will still point to the same object so any change in one variable will be reflected in the other variables and will cause you a major headache if your intention was to copy the object values and not the reference.

Solution 3 - Javascript

There is another option that does not introduce global gotchas when trying to initialize multiple variables to the same value. Whether or not it is preferable to the long way is a judgement call. It will likely be slower and may or may not be more readable. In your specific case, I think that the long way is probably more readable and maintainable as well as being faster.

The other way utilizes Destructuring assignment.

let [moveUp, moveDown,
     moveLeft, moveRight,
     mouseDown, touchDown] = Array(6).fill(false);

console.log(JSON.stringify({
    moveUp, moveDown,
    moveLeft, moveRight,
    mouseDown, touchDown
}, null, '  '));

// NOTE: If you want to do this with objects, you would be safer doing this
let [obj1, obj2, obj3] = Array(3).fill(null).map(() => ({}));
console.log(JSON.stringify({
    obj1, obj2, obj3
}, null, '  '));
// So that each array element is a unique object

// Or another cool trick would be to use an infinite generator
let [a, b, c, d] = (function*() { while (true) yield {x: 0, y: 0} })();
console.log(JSON.stringify({
    a, b, c, d
}, null, '  '));

// Or generic fixed generator function
function* nTimes(n, f) {
    for(let i = 0; i < n; i++) {
        yield f();
    }
}
let [p1, p2, p3] = [...nTimes(3, () => ({ x: 0, y: 0 }))];
console.log(JSON.stringify({
    p1, p2, p3
}, null, '  '));

This allows you to initialize a set of var, let, or const variables to the same value on a single line all with the same expected scope.

References:

Solution 4 - Javascript

The original variables you listed can be declared and assigned to the same value in a short line of code using destructuring assignment. The keywords let, const, and var can all be used for this type of assignment.

let [moveUp, moveDown, moveLeft, moveRight, mouseDown, touchDown] = Array(6).fill(false);

Solution 5 - Javascript

I personally try to avoid var at all times, and use let and const always, I learned it from bugs that occur and most best practices recommendations, so below is mentioned in comments but to be more precise:

function good() {  
    let a;
    let b;
    let c;
    let d;        
    a = b = c = d = 'hello';    
    console.log(d);    
}

function bad() {
    //only the first variable is declared as local
    let a = b = c = d = 'bye';
    console.log(d)
}

let a;
let d;

good();
bad();

//expected undefined
console.log(a);

//expected bye 
console.log(d);

Solution 6 - Javascript

Put the varible in an array and Use a for Loop to assign the same value to multiple variables.

  myArray[moveUP, moveDown, moveLeft];
	
	for(var i = 0; i < myArray.length; i++){
		
		myArray[i] = true;
		
	}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2109908View Question on Stackoverflow
Solution 1 - JavascriptkarthikrView Answer on Stackoverflow
Solution 2 - JavascriptGovind RaiView Answer on Stackoverflow
Solution 3 - JavascriptDoug CoburnView Answer on Stackoverflow
Solution 4 - JavascriptStalkovView Answer on Stackoverflow
Solution 5 - JavascriptFarhad KazemiView Answer on Stackoverflow
Solution 6 - JavascriptTohamas BrewsterView Answer on Stackoverflow