Add elements inside Array conditionally in JavaScript

Question

When I try to merge two objects using the spread operator conditionally, it works when the condition is true or false:

let condition = false;
let obj1 = { key1: 'value1'}
let obj2 = {
  key2: 'value2',
  ...(condition && obj1),
};

// obj2 = {key2: 'value2'};

When I try to use the same logic with Arrays, it only works when the condition is true:

let condition = true;
let arr1 = ['value1'];
let arr2 = ['value2', ...(condition && arr1)];

// arr2 = ['value2', 'value1']

If the condition is false an error is thrown:

let condition = false;
let arr1 = ['value1'];
let arr2 = ['value2', ...(condition && arr1)];

// Error

Why is the behaviour different between Array and Object?

Not cleared. What do you want to achieve here? Can you please paste your (condition && arr) as well? — narayansharma91
– narayansharma91, Commented May 7, 2019 at 11:34
FYI, { ...null } and { ...undefined } won't throw error either. So, we can forgo that check as well if we are unsure if an object has value or not — adiga
– adiga, Commented May 7, 2019 at 12:13
FWIW if you wanted to spread booleans, you could do something like Boolean.prototype[Symbol.iterator] = function* () {} (obviously don't do this in production code, it's a mere curio) — Conor O'Brien
– Conor O'Brien, Commented May 7, 2019 at 14:00
Is what you really want to achieve condition ? [...arr1, ...arr2] : arr1 or is this just a question on how the language works? — JollyJoker
– JollyJoker, Commented May 7, 2019 at 14:20
@JollyJoker it's just a question on how the language works. Thanks — João Rodrigues
– João Rodrigues, Commented May 7, 2019 at 14:34

Nzall · Accepted Answer · 2019-05-07 14:30:44Z

97

When you spread into an array, you call the Symbol.iterator method on the object. && evaluates to the first falsey value (or the last truthy value, if all are truthy), so

let arr2 = ['value2', ...(condition && arr)];

results in

let arr2 = ['value2', ...(false)];

But false does not have a Symbol.iterator method.

You could use the conditional operator instead, and spread an empty array if the condition is false:

let condition = false;
let arr1 = ['value1'];
let arr2 = ['value2', ...(condition ? arr1 : [])];
console.log(arr2);

(This works because the empty array does have the Symbol.iterator method)

Object spread is completely different: it copies own enumerable properties from a provided object onto a new object. false does not have any own enumerable properties, so nothing gets copied.

edited May 7, 2019 at 14:30

Nzall

3,5855 gold badges36 silver badges65 bronze badges

answered May 7, 2019 at 11:34

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2022-12-30 11:12:16Z

25

false is not spreadable.

You need a spreadable object (the one where Symbol.iterator is implemented) which returns nothing, if spreaded.

You could use an empty array as default value. This works even if arr is falsy.

let condition = false;
let arr1 = ['value1'];
let arr2 = ['value2', ...condition && arr || []];

console.log(arr2);

edited Dec 30, 2022 at 11:12

answered May 7, 2019 at 11:36

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

5 Comments

Orelsanpls Over a year ago

would add parenthesis to make it clearer ((condition && arr) || [])

deceze Over a year ago

This could really use the ?: operator instead of a chained ||.

Nina Scholz Over a year ago

@deceze, it really depends on the use case.

deceze Over a year ago

I think this is a use case where ?: is a lot more appropriate. ;)

user2127256 Over a year ago

Couple of points: Should have used const arr1 ...., const arr2 ... instead of var. Can be simplified to: const arr2 = ['value2', ...(condiition ? ['value1'] : [])];

trincot · Accepted Answer · 2019-05-07 11:55:54Z

This is a specification difference between the spread syntax for object literals and for array literals.

MDN briefly mentions it here -- I highlight:

Spread syntax (other than in the case of spread properties) can be applied only to iterable objects

The difference comes from the EcmaScript 2018 specification:

Concerning object spread syntax, see 12.2.6.8 Runtime Semantics: PropertyDefinitionEvaluation:
- It calls CopyDataProperties(object, fromValue, excludedNames) where the fromValue is wrapped to an object with ToObject, and therefore becomes iterable, even if fromValue is a primitive value like false. Therefore {...false} is valid EcmaScript.
Concerning array spread syntax, see 12.2.5.2 Runtime Semantics: ArrayAccumulation:
- It merely calls GetValue(spreadRef) which does not do the above mentioned wrapping. And so the subsequent call to GetIterator will trigger an error on a primitive value, as it is not iterable. Therefore [...false] is invalid EcmaScript.

wriozumi · Accepted Answer · 2022-04-06 10:34:46Z

2

Example with objects:

 const lessonMenuItems = [
  ...(true
    ? [
        {
          value: 'post',
        },
      ]
    : []),
  {
    value: 'assign',
  },
]

Result:

lessonMenuItems = [
  {
    value: 'post',
  },
  {
    value: 'assign',
  },
]

edited Apr 6, 2022 at 10:34

answered Feb 11, 2021 at 4:45

wriozumi

5696 silver badges6 bronze badges

Comments

mvndaai · Accepted Answer · 2022-08-20 03:21:10Z

0

You can use a ternary operator (? :) and put an empty array as the false

let condition = false;
let arr1 = ['value1'];
let arr2 = ['value2', ...(condition ? arr1 : [])];
console.log(arr2);

edited Aug 20, 2022 at 3:21

answered Sep 13, 2021 at 17:32

mvndaai

3,8513 gold badges35 silver badges38 bronze badges

Collectives™ on Stack Overflow

Add elements inside Array conditionally in JavaScript

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related