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.