In JavaScript, is chained assignment okay?

Question

Am not new to JS or its syntax, but sometimes, the semantics of the language has me stumped at times. At work today, a colleague mentioned this:

var a = b = [];

is not the same as

var a = [], b = [];

or

var a = []; var b = [];

since the first version actually assigns the reference to an empty array to a and b. I couldn't quite accept this as true, but I'm not sure. What do you all think?

Ament

See #1759076 – Bouleversement

Thank you, Crescent Fresh - I didn't quite see that question because I was looking for "chained assignment". – Ament

Does this answer your question? Multiple left-hand assignment with JavaScript – Wise

Answer 1

Yes, they're not the same. var a = b = [] is equivalent to

var a;
b = [];
a = b;

Not only do both a and b get assigned the same value (a reference to the same empty array), b is not declared at all. In strict mode in ECMAScript 5 and later, this will throw a ReferenceError; otherwise, unless there is already a variable b in scope, b is silently created as a property of the global object and acts similarly to a global variable, wherever the code is, even inside a function. Which is not good.

You can see this quite easily:

(function() {
    var a = b = [];
})();

console.log(b); // Shows []

Accounting

I didn't see immediately about b being a global variable, thanks! – Ament

+1 Another reason to avoid an assignment to an unresolvable reference is that on ES5, under strict mode, a ReferenceError will be thrown. – Undercast

Answer 2

Your colleague is right:

var a = b = [];
a.push('something');
console.log(b); // outputs ["something"]

but:

var a = [],
  b = [];
a.push('something');
console.log(b); // outputs []

Gilthead

Answer 3

Your colleague is right. The first statement creates a new, empty array. Then, a reference to this array is assigned to b. Then, the same reference (which is the result of the assignment expression) is assigned to a. So a and b refer to the same array.

In all other cases, you create two individual arrays.

By the way: This behavior is quite common and is the same in all C based programming languages. So this is not JavaScript specific.

Colorable

Thanks for your reply, Tobias, and also for pointing out the commonality in all C-based languages. – Ament

This can be tested with arrays in JS: ["dog"] === ["dog"]; returns false, but var a = b = ["dog"]; a === b; returns true. – Trip

Answer 4

With the first example b is a reference to a, and b becomes a global variable, accessible from anywhere (and it replaces any b variable that may already exist in the global scope).

Butter

Answer 5

To complement the already provided answers. ref assignments are different from value assignments

var x = y = 3; // by value
y++; // 4
x; // 3

var a = b = []; // by ref
b.push(1); // [1];
a; // [1]
a = [];
a.push(2); // [2];
b; // [1]

Now that we've addressed 2 two, your question also makes reference to linting, which is the practice of "pretty code" (not functional). In fact, JSHint has deprecated all their "pretty code rules"

That been said, I usually use the following style.-

var a, b, c, // first row all unassigned
    x = 1, // 1 row per assigned
    y = 2,
    list = [
       'additional',
       'indentation'
    ],
    obj = {
       A: 'A',
       B: 'B'
    };
var z = y +2; // created a new `var` cluster since it uses a var from the previous

Hot

Answer 6

To accomplish this, you need to split the var declaration from the chained assignment (see: http://davidshariff.com/blog/chaining-variable-assignments-in-javascript-words-of-caution/ ).

E.g.

var one = 1, two = 2;

one = two = 3; /* Now both equal 3 */

But if you do as you described (var one = two = 3; in this example) two leaks into the global space, while one is declared in the local scope.

Shortie

Answer 7

Since your question is if it's ok or not, it's ok except in strict mode. Modules are in strict mode by default, so it's not allowed.

<script>
  const a=b=1 // allowed
<script>

<script>
  "user strict"
  const a=b=1 // error
<script>

<script type="module">
  const a=b=1 // error
<script>

Trumaine