@babel/plugin-transform-optional-chaining

What is @babel/plugin-transform-optional-chaining?

The @babel/plugin-transform-optional-chaining package is a Babel plugin that allows developers to use the optional chaining syntax in JavaScript. Optional chaining is a feature that enables developers to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid. The plugin transforms optional chaining syntax into a form that can be understood by JavaScript engines that do not support this feature natively.

What are @babel/plugin-transform-optional-chaining's main functionalities?

Optional Property Access

This feature allows safe access to nested object properties. If any reference is nullish (null or undefined), it returns undefined instead of throwing an error.

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

Optional Method Calls

This feature enables calling a method that may not exist. If the method is not available, it returns undefined instead of throwing an error.

const obj = { a: { b: { c: () => 'Hello' } } };
const greeting = obj?.a?.b?.c?.();

Optional Bracket Notation

This feature allows the use of optional chaining with bracket notation, which is useful when accessing properties with keys that are not valid identifiers.

const obj = { a: { b: { 'c': 1 } } };
const value = obj?.a?.['b']?.['c'];

Other packages similar to @babel/plugin-transform-optional-chaining

es5-dot-prop

This package provides a way to access properties of objects using dot notation, similar to optional chaining. However, it does not support the optional chaining syntax and requires manual checks for nullish values.

lodash.get

Lodash's get function allows safe access to object properties, similar to optional chaining. It's a part of the Lodash utility library and requires passing the object path as a string or array, unlike the native-like syntax that optional chaining provides.

README

@babel/plugin-transform-optional-chaining

Transform optional chaining operators into a series of nil checks

See our website @babel/plugin-transform-optional-chaining for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-optional-chaining

or using yarn:

yarn add @babel/plugin-transform-optional-chaining --dev

Changelog

v7.24.7 (2024-06-05)

:bug: Bug Fix

• babel-node
  • #16554 Allow extra flags in babel-node (@nicolo-ribaudo)
• babel-traverse
  • #16522 fix: incorrect constantViolations with destructuring (@liuxingbaoyu)
• babel-helper-transform-fixture-test-runner, babel-plugin-proposal-explicit-resource-management
  • #16524 fix: Transform using in switch correctly (@liuxingbaoyu)

:house: Internal

• babel-helpers, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #16525 Delete unused array helpers (@blakewilson)