Why does destructuring on boolean is working in javascript?

Question

why destructuring a boolean is working. For example

const condition = true
const toto = { name: 'toto' }

const other = {
   other: 'other',
   ...condition && toto
}
console.log({ other }) // { other: 'other', name: 'toto' }

const falseCondition = false

const otherWithoutToto = {
   other: 'other',
   ...falseCondition && toto
}

console.log({ otherWithoutToto }) // { other: 'other' }

In the case of false boolean, we don't add property, otherwise we will. Actually it's working well but someone can explain me why is it possible?

I don't see any destructuring in your code. `...` in this context is known as _spread syntax_. — Yousaf, Sep 25 '21 at 07:08
What are you trying to achieve first of all? Like what should be the result and what do you have in hand now — Ashwin Chandran, Sep 25 '21 at 07:18

Nick Parsons · Accepted Answer · 2023-03-04T10:27:29.320

What you're using here isn't destructuring, it's object property spread. It requires that the expression to the right-hand side (RHS) of the ... evaluates to either an object or something that can be converted to one (with exceptions for null and undefined). It then takes the own-enumerable properties from the object and copies them to the object being created. In the case of your example, two possibilities can occur for the below code:

...(condition && toto)

condition is true, and so the condition && toto expression evaluates to the object toto. It doesn't evaluate to a boolean, but rather the last truthy value, which in your case is the object toto. The object property spread syntax then takes the own-enumerable properties from the object and adds them to the object being created.
condition is false, and so the above expression evaluates to the value false. This means that JavaScript treats the above code as ...false. As false is a primitive and not an object, JavaScript tries to convert it to one by wrapping it in a boolean object, so the above is interpreted as:
```
...new Boolean(false)
```
now that the right-hand side of the ... has been converted to an object, JavaScript then takes the own-enumerable properties of the boolean object and adds them to the object being created. As the boolean doesn't have any own properties which are enumerable, nothing is added to the created object.

Why does destructuring on boolean is working in javascript?

1 Answers1