Optional chaining assignment proposal

June 23, 2023 · View on GitHub

Basically, allow this:

foo?.bar = value;

which is equivalent to

foo == null ? undefined : (foo.bar = value);

It was originally "deferred for later" given the complexity, and it was not clear if it was useful: https://github.com/tc39/proposal-optional-chaining/issues/18
delete foo?.bar is already allowed
After some real-worl experience with optional chaining, it is clear that it would be useful:
- People on twitter: https://twitter.com/fabiospampinato/status/1669095271395983360
- Stackoverflow:
  - https://stackoverflow.com/questions/58878948/optional-chaining-on-the-left-side-in-javascript
  - https://stackoverflow.com/questions/72606448/what-are-alternative-methods-for-left-side-optional-chaining-in-javascript
- Some people on stackoverflow expect different behavior:
  - https://stackoverflow.com/questions/70624368/how-to-perform-deep-optional-assignment-in-javascript

Real-world examples

Use this regexp to find some of them in your codebase: if \((.*?)\)[\s\n]*\{?[\s\n]*\1\.

Babel

https://github.com/babel/babel/blob/5f74b510ff251af5bf7fbbf25c1c934ffcb6df52/packages/babel-helpers/src/helpers/wrapRegExp.js#L26-L27

var indices = result.indices;
if (indices) indices.groups = buildGroups(indices, this);

could be rewritten as

var indices = result.indices;
indices?.groups = buildGroups(indices, this);

https://github.com/babel/babel/blob/5f74b510ff251af5bf7fbbf25c1c934ffcb6df52/packages/babel-parser/src/plugins/estree.ts#L360
```
if (node) {
  node.kind = "init";
  node.type = "Property";
}
```
could be rewritten as
```
node?.kind = "init";
node?.type = "Property";
```
https://github.com/babel/babel/blob/5f74b510ff251af5bf7fbbf25c1c934ffcb6df52/packages/babel-parser/src/plugins/typescript/index.ts#L539
```
if (refTrailingCommaPos) {
  refTrailingCommaPos.value = trailingCommaPos;
}
```
could be rewritten as
```
refTrailingCommaPos?.value = trailingCommaPos;
```
https://github.com/babel/babel/blob/5f74b510ff251af5bf7fbbf25c1c934ffcb6df52/packages/babel-parser/src/plugins/typescript/index.ts#L2145
```
if (declaration) {
  declaration.declare = true;
}
```
could be rewritten as
```
declaration?.declare = true;
```
https://github.com/babel/babel/blob/5f74b510ff251af5bf7fbbf25c1c934ffcb6df52/packages/babel-plugin-proposal-decorators/src/transformer-2023-05.ts#L839
```
if (element.node) {
  element.node.decorators = null;
}
```
could be rewritten as
```
element.node?.decorators = null;
```

shosho

https://github.com/fabiospampinato/shosho/blob/5371d873afd66f4fa6a9e33732e28bc4b00baf5d/src/index.ts#L361
```
if ( !next && node.parent ) node.parent.handlers = prev;
```
could be rewritten as
```
if ( !next ) node.parent?.handlers = prev;
```

TypeScript

https://github.com/microsoft/TypeScript/blob/39da6b1c63c701c7343b630c6de6210f19be5599/src/compiler/binder.ts#L2151
```
if (lastContainer) {
  lastContainer.nextContainer = next;
}
```
could be rewritten as
```
lastContainer?.nextContainer = next;
```
https://github.com/microsoft/TypeScript/blob/39da6b1c63c701c7343b630c6de6210f19be5599/src/compiler/checker.ts#L6758
```
if (links) {
  links.serializedTypes ||= new Map();
}
```
could be rewritten as
```
links?.serializedTypes ||= new Map();
```

https://github.com/microsoft/TypeScript/blob/39da6b1c63c701c7343b630c6de6210f19be5599/src/compiler/checker.ts#L30712

if (links) {
  links.jsxImplicitImportContainer = result || false;
}

could be rewritten as

links?.jsxImplicitImportContainer = result || false;

https://github.com/microsoft/TypeScript/blob/39da6b1c63c701c7343b630c6de6210f19be5599/src/compiler/emitter.ts#L1027

if (printer.bundleFileInfo) printer.bundleFileInfo.mapHash = computeSignature(sourceMap, host);

could be rewritten as

printer.bundleFileInfo?.mapHash = computeSignature(sourceMap, host);

... and many more found using the above regexp