# Optional properties in object literals

**URL:** <https://es.discourse.group/t/optional-properties-in-object-literals/2075>\
**Category:** 💡 Ideas\
**Created:** [June 22, 2024, 12:15pm UTC](https://es.discourse.group/t/optional-properties-in-object-literals/2075 "2024-06-22T12:15:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gimenete](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/gimenete/32/2130_2.png) [@gimenete](https://es.discourse.group/u/gimenete)\
**Post date:** [June 22, 2024, 12:15pm UTC](https://es.discourse.group/t/optional-properties-in-object-literals/2075/1 "2024-06-22T12:15:32Z")

</div>

This is an idea for a JavaScript proposal. It would be nice to have a quick way to conditionally add properties to an object literal. More specifically when the value is undefined it is often preferred to not have the property at all in the object. For example:

```js

const value = something();

const obj = { a: 1 };

if (value !== undefined) {

obj.b = value;

}

```

or

```js

const value = something();

const obj = { a: 1, ...(value ? { b: value } : {}) };

```

This is very verbose. My proposal is to add a "?" operator to object literals. This operator would only add the property if the value is not undefined. For example:

```js

const value = something();

const obj = { a: 1, b?: value };

```

If `value` is `undefined` then `obj` would be `{ a: 1 }`. If `value` is not `undefined` then `obj` would be `{ a: 1, b: value }`.

Other examples:

```js

const headers = { "Content-Length"?: length };

const obj = { [key]?: value };

```

Why only `undefined`? Because it matches the behavior of JSON serialization. If you serialize an object with `JSON.stringify` and the value is `undefined` then the property is not included in the JSON string.

---

<div class="post-metadata">

**Author:** ![aclaymore](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/aclaymore/32/501_2.png) [@aclaymore](https://es.discourse.group/u/aclaymore)\
**Post date:** [June 22, 2024, 2:37pm UTC](https://es.discourse.group/t/optional-properties-in-object-literals/2075/2 "2024-06-22T14:37:29Z")

</div>

Similar discussion in this topic: [Conditionally add elements to declaratively defined arrays](https://es.discourse.group/t/conditionally-add-elements-to-declaratively-defined-arrays/1041)

---

<div class="post-metadata">

**Author:** ![bakkot](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/bakkot/32/22_2.png) [@bakkot](https://es.discourse.group/u/bakkot)\
**Post date:** [June 22, 2024, 3:20pm UTC](https://es.discourse.group/t/optional-properties-in-object-literals/2075/3 "2024-06-22T15:20:51Z")

</div>

Practically speaking, engines are better able to optimize code when objects have the same shape, i.e. all the same keys in the same order. So programs will generally perform better if you include the property and leave it as `undefined`, rather than omitting the property. As such I don't think we should be adding syntax to encourage this pattern.

---

<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:** [June 26, 2024, 8:26am UTC](https://es.discourse.group/t/optional-properties-in-object-literals/2075/4 "2024-06-26T08:26:26Z")

</div>

> [@Optional keys in objects](https://es.discourse.group/t/optional-keys-in-objects/523):
>
> I have typical problem with javascript. Say, I have an input object, which, in some cases, could be enrich with additional keys. I have two options how to do that. First: function enrich(input, optionalData) { return { ...input, additionalKey: optionalData } } Now I could have an object with { additionalKey: undefined }, which could lead to bugs. For example, additionalKey will be lost after JSON.stringify/parse. Another bug: check key with operator in ('additionalKey' in obj), whi…