optional-chaining-assignment.md

Optional chaining assignment proposal

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: tc39/proposal-optional-chaining#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