Create array and push into it in one line

The following is just a theoretical JavaScript question. I am curious if the following can be converting into a single statement:

if(!window.foo){
  window.foo = [];
}
window.foo.push('bar');

everyone has probably written this code before, but can it be done in one line?
At first I thought something like this would work:

(window.foo || window.foo = []).push('bar');

but that doesn't work because of an invalid assignment. Next I tried chaining something on the push, but that doesn't work because push does not return the array.

Any thoughts on if this can be done in plain JavaScript?
(the result by the way should be that window.foo = ['bar'])


Solution 1:

You've got your assignment backwards*. It should be:

(window.foo = window.foo || []).push('bar');

The || operator in JavaScript does not return a boolean value. If the left hand side is truthy, it returns the left hand side, otherwise it returns the right hand side.

a = a || [];

is equivalent to

a = a ? a : [];

So an alternative way of writing the above is:

(window.foo = window.foo ? window.foo : []).push('bar');

* see comments for details

Solution 2:

Your code works just fine if you add parentheses so that it does what you intended:

(window.foo || (window.foo = [])).push('bar');

Without the parentheses, it thinks that it should evaluate window.foo || window.foo first, and then assign the array to the result of that, which is not possible.

Solution 3:

This question got me playing with different options for fun. It's too bad push returns the length instead of the original array reference, but for even shorter expressions it can be helpful to have something that can be immediately iterated, mapped, etc.

window.foo = (window.foo||[]).concat(['bar']); // always returns array, allowing:
(window.foo = (window.foo||[]).concat(['bar'])).forEach( ... )

(window.foo = window.foo||[]).push('bar'); // always returns length

window.foo && window.foo.push('bar') || (window.foo = ['bar']); // playing around