Skip to content
Advertisement

Add elements inside Array conditionally in JavaScript

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?

Advertisement

Answer

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.

Advertisement