# optional property shorthand in object literal

**URL:** <https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196>\
**Category:** 🦋 Proposals\
**Tags:** proposal\
**Created:** [January 18, 2020, 12:14am UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196 "2020-01-18T00:14:33Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![zieka](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/zieka/32/221_2.png) [@zieka](https://es.discourse.group/u/zieka)\
**Post date:** [January 18, 2020, 12:14am UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196/1 "2020-01-18T00:14:33Z")

</div>

## Optional Property Shorthand in Object Literal

Optional property shorthand in object literal would allow an object to be initialized with potentially `null` or `undefined` variables and in the case that the variables are `null` or `undefined` they will be omitted from the resulting object. How this differs from the current short hand can be seen in the following example:

Current shorthand:

```javascript
const a = 1;
let b; // type is unknown

...

const ourObject = {
  a,
  b
};

```

When `b` is `null` `ourObject` becomes:

```javascript
{
  a: 1,
  b: null
}

```

Optional property shorthand:

```javascript
const a = 1;
let b; // type is unknown

...

const ourObject = {
  a,
  b?
};

```

When `b` is `undefined` or `null` `ourObject` becomes:

```javascript
{
  a: 1
}

```

### Background:

Currently when initializing objects with variables of type Maybe the resulting object will still have the ambiguous property with the value of `null`. There are various ways to handle this but here are a few common ones:

#### Clean the object

We can use the current short hand and then iterate through the keys and produce a new object with the null properties omitted.

Issues:

- extra code

#### Build the object and conditionally add properties

We can create an object with the non ambiguous properties and then conditionally check for the ambiguous properties and add them in:

```javascript
const ourObject = { a };

if (b) {
  ourObject['b'] = b
}

```

Issues:

- easy to reason about but gets too verbose with longer property names
- lots of optional properties can produce lots of code

#### Initialize the optional properties in the object using spread

When initializing the object we could spread the result of falsey check and another object with just the ambiguous variable. This way either null gets spread into our final object which means the property is omitted or an object with the value is spread in meaning the property and its value is included:

```javascript
const ourObject = {
    a: 1,
    ...b && {b}
}

```

Issues:

- concise but hard to reason about

---

<div class="post-metadata">

**Author:** ![zieka](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/zieka/32/221_2.png) [@zieka](https://es.discourse.group/u/zieka)\
**Post date:** [January 20, 2020, 4:49pm UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196/2 "2020-01-20T16:49:23Z")

</div>

just realized I put this in the wrong channel; moving to ideas

update: nm its locked now; if a mod could move this to ideas that would be great

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [January 20, 2020, 5:02pm UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196/3 "2020-01-20T17:02:39Z")

</div>

Posts can be moved between topics but i can’t find how to move an entire topic.

---

<div class="post-metadata">

**Author:** ![zieka](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/zieka/32/221_2.png) [@zieka](https://es.discourse.group/u/zieka)\
**Post date:** [January 20, 2020, 7:17pm UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196/4 "2020-01-20T19:17:45Z")

</div>

I guess it can be left here; if anyone has any feedback I also have this repo:

> **[zieka/optional-property-shorthand-in-object-literal](https://github.com/zieka/optional-property-shorthand-in-object-literal)**
>
> A shorthand for constructing concise objects when using potentially null or undefined variables - zieka/optional-property-shorthand-in-object-literal

---

<div class="post-metadata">

**Author:** ![daniel.rentz](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/daniel.rentz/32/1946_2.png) [@daniel.rentz](https://es.discourse.group/u/daniel.rentz)\
**Post date:** [July 24, 2020, 4:03am UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196/5 "2020-07-24T04:03:16Z")

</div>

This could even be extended to all kinds of properties. The following example should result in an empty object:

```javascript
let undef;
const o = {
    undef?,
    a?: undef,
    ["b"]?: undef
};

```

---

<div class="post-metadata">

**Author:** ![zieka](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/zieka/32/221_2.png) [@zieka](https://es.discourse.group/u/zieka)\
**Post date:** [March 3, 2021, 4:45pm UTC](https://es.discourse.group/t/optional-property-shorthand-in-object-literal/196/6 "2021-03-03T16:45:01Z")

</div>

Ya would also be nice to have a spread like syntax too like maybe:

```javascript
const test = {
  a: 1,
  b: undefined,
  c: undefined
}

const target = { ...?test } // { a: 1 }

```