Create array and push into it in one line

Question

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'])

Why do you need it in one line? most devs do foo = foo || []; — epascarello
– epascarello, Commented Jan 30, 2013 at 21:29
I'm assuming you specifically want to use the push function? otherwise you could just have window.foo = window.foo || ['bar'] — Jeff
– Jeff, Commented Jan 30, 2013 at 21:32
@Jeff I think he wants to push bar onto an existing foo too. — Neil
– Neil, Commented Jan 30, 2013 at 21:34
yeah, this is something that would be in a loop, i should have mentioned it — mkoryak
– mkoryak, Commented Jan 30, 2013 at 21:36

zzzzBov · Accepted Answer · 2013-01-30 21:53:29Z

107

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

edited Jan 30, 2013 at 21:53

answered Jan 30, 2013 at 21:30

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guffa Over a year ago

No, the assignment isn't backwards, it's just a problem with operator priorities. What you show is a different way of doing it; it always assigns a value to the property instead of only doing the assignment if the property is not set.

kjhughes · Accepted Answer · 2021-11-08 14:44:08Z

20

2021 Update

@zzzzBov's helpful answer,

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

can be further simplified using the new ||= operator, logical OR assignment¹,

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

¹ See tcs39/proposal-logical-assignment, currently in Stage 4, and supported by major browsers.

answered Nov 8, 2021 at 14:44

kjhughes

113k31 gold badges198 silver badges276 bronze badges

Comments

Guffa · Accepted Answer · 2013-01-30 21:36:34Z

17

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.

answered Jan 30, 2013 at 21:36

Guffa

703k111 gold badges760 silver badges1k bronze badges

2 Comments

epascarello Over a year ago

It is great stuff like this works, but who wants to maintain it! I do not raise my hand.

Jeff Over a year ago

@epascarello I'd be fine with it. zzzzBov's answer is nicer, and it would be even nicer to have it on one line, but I can read this without pausing just fine - it's just what you're used to.

Plynx · Accepted Answer · 2013-01-30 22:19:30Z

14

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

edited Jan 30, 2013 at 22:19

answered Jan 30, 2013 at 21:30

Plynx

11.5k3 gold badges34 silver badges34 bronze badges

Comments

ARNON · Accepted Answer · 2022-10-12 12:23:08Z

7

The shortest way to do this is using Logical Nullish Assignment:

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

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

answered Oct 12, 2022 at 12:23

ARNON

1,2271 gold badge21 silver badges38 bronze badges

Comments

rptfrg · Accepted Answer · 2023-01-03 10:26:13Z

0

You can use .concat instead of .push, since .concat returns the array and .push returns the array's length.

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

This way the code is easier to read and understand.

Shorter version with a new ||= operator: (may be slightly harder to read though)

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

edited Jan 3, 2023 at 10:26

answered Jan 3, 2023 at 10:12

rptfrg

1421 gold badge3 silver badges19 bronze badges

Comments

Rory · Accepted Answer · 2024-03-06 21:20:36Z

0

In a similar case where I needed to merge the contents of two arrays if they existed, I made use of the spread operator:

window.foo = [...['bar'], ...window.foo ?== []]

This works for any array including 'bar'.

answered Mar 6, 2024 at 21:20

Rory

2,5061 gold badge29 silver badges45 bronze badges

Collectives™ on Stack Overflow

Create array and push into it in one line

7 Answers 7

1 Comment

2021 Update

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2021 Update

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related