Initialize array with one element, or push element if array exists

Question

Let's say you have a hash o of arrays; for example registered callbacks for events, when each event can have 0 or more callbacks.

Is there a better way to say this in ES6?

if (key in o) o[key].push(x); else o[key] = [x]

By "better" I mean more easily understood by other developers. Possibly more concise, but not at the expense of readability. A particular (common) problem is that o is often a longer expression, e.g. this.listeners, and repeating it three times seems suboptimal. So real code might look like this:

if (event in this.listeners)
    this.listeners[event].push(callback);
else
    this.listeners[event] = [callback];

Nina Scholz · Accepted Answer · 2021-08-30 08:11:55Z

17

By using the logical nullish assignment ??=, you could check the property and if it is undefined or null, create a new array.

(o[key] ??= []).push(x);

Older approach:

You could use a logical OR and create an array if necessary.

o[key] = o[key] || [];
o[key].push(x);

edited Aug 30, 2021 at 8:11

answered Jan 31, 2017 at 7:26

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Dan Dascalescu · Accepted Answer · 2017-05-21 04:11:21Z

4

One solution is to use a logical OR with the empty array and push to the resulting array:

(o[key] = o[key] || []).push(x);

This repeats o[key] only once.

Note the parens around the entire (o[key] = o[key] || []) assignment, whose result is o[key].

o[key] = (o[key] || []).push(x) would be incorrect, because push returns the new length of the array.

edited May 21, 2017 at 4:11

answered Jan 31, 2017 at 7:32

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

3 Comments

Nina Scholz Over a year ago

while that works, it is prone of misreading in the first sight, because of the assignment inside of parenthesis.

Amadan Over a year ago

@NinaScholz: It is somewhat awkward in JS (mostly due to not having ||= "default assignment operator"), but if you're familiar with the idiom it is not too bad. Many idioms are kind of opaque at start, but become very legible with experience (e.g. the ubiquitous !! "booleaniser operator").

Nina Scholz Over a year ago

@Amadan, it is more the problem of the assignment operator inside of a line.

David · Accepted Answer · 2021-05-11 20:26:38Z

3

With the proposal logical assignment, which is currently in stage 4, you can do this:

(o[key] ||= []).push(x);

It's supported by major browsers. It is also supported by typescript (at least 4.1 and above)

answered May 11, 2021 at 20:26

David

2,7561 gold badge28 silver badges31 bronze badges

Comments

CodingIntrigue · Accepted Answer · 2017-01-31 12:17:22Z

1

Pretty much the same as the other answers (except that it creates a new array), but you could use the array initializer syntax:

o[key] = [...o[key] || [], x];

answered Jan 31, 2017 at 12:17

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Comments

Redu · Accepted Answer · 2017-01-31 09:56:56Z

0

You might as well do as follows; They have minor performance differences.

o[key] = o[key] ? o[key].concat(x) : [x]
o[key] ? o[key].push(x) : o[key] = [x]
o[key] && o[key].push(x) || (o[key] = [x])

answered Jan 31, 2017 at 9:56

Redu

26.3k6 gold badges61 silver badges84 bronze badges

1 Comment

Dan Dascalescu Over a year ago

While these are correct, I'd prefer repeating o[key] as few times as possible (which seems to be 2).

Mithilesh Gupta · Accepted Answer · 2017-01-31 07:31:53Z

-1

try {
    o[key].push(x)
}
catch(e) {
    //cannot push to undefined exception
    o[key] = [x]
}

answered Jan 31, 2017 at 7:31

Mithilesh Gupta

2,9401 gold badge21 silver badges18 bronze badges

1 Comment

KarelG Over a year ago

Oh boy, using exceptions should happen only if there is a good reason for it. There is no one here...

Collectives™ on Stack Overflow

Initialize array with one element, or push element if array exists

6 Answers 6

Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related