I am pushing elements to an array based on a condition as explained here .html

const arr = [
  ...(cond ? ['a'] : []),
  'b',
];

Now, this works fine, but when I try

const arr = [
  ...(cond && ['a']),
  'b',
];

instead, it stops working.

I would like to know why it's not working anymore, and if there is a way to conditionally push using spread operator and && instead of ?.

Thank you

I am pushing elements to an array based on a condition as explained here http://2ality./2017/04/conditional-literal-entries.html

const arr = [
  ...(cond ? ['a'] : []),
  'b',
];

Now, this works fine, but when I try

const arr = [
  ...(cond && ['a']),
  'b',
];

instead, it stops working.

I would like to know why it's not working anymore, and if there is a way to conditionally push using spread operator and && instead of ?.

Thank you

• javascript
• arrays
• spread-syntax

• 1 please add the value of cond. – Nina Scholz Commented Feb 14, 2018 at 9:03
• In the second example, if cond evaluates to false, the expression evaluates to false and you end up with ...false instead of ...[] therefore throwing an error. – Miguel Calderón Commented Feb 14, 2018 at 9:10
• @NinaScholz cond is a condition, and as such, may be true or false – user3808307 Commented Feb 14, 2018 at 9:13
• @Miguel in the case I am using to test particulary it evaluates to true, and it does not add "a" to the array. Either way, do you know to fix this? – user3808307 Commented Feb 14, 2018 at 9:15
• 1 @user3808307 you can try in the console: [...(true && ['a'])] gives ['a'] but [...(false && ['a'])] yield a TypeError. – Seb D. Commented Feb 14, 2018 at 9:41

2 Answers 2

No, it is not possible, because all iterable objects are truthy.

If cond is falsey, you have a value which is not spreadable by Symbol.iterator

The built-in types with a @@iterator method are:

• Array.prototype[@@iterator]()
• TypedArray.prototype[@@iterator]()
• String.prototype[@@iterator]()
• Map.prototype[@@iterator]()
• Set.prototype[@@iterator]()

var cond = false;

const arr = [
  ...(cond && ['a']),  // throws error, function expected
  'b',
];

console.log(arr);

Yes, it's possible. _{But maybe that's an overkill that performs worse and decreases the readability.}

const arr = [];
arr.push(...[false && 'nope'].filter(v => v));
arr.push(...[true && 'yep'].filter(v => v));
arr.push(...[false && 'no', true && 'yes'].filter(v => v));
    
console.info(arr);

As @Nina Scholz indicated an iterable is required for spread operator to work. By using a second array (which may be empty) we can eventually reach the following state (arr.push()).