Section 1.1: Optional Chaining (?.) - Safeguarding Your Access

Optional Chaining allows you to access object properties or call methods without the constant worry of encountering null or undefined references. If any link in the chain is missing, the expression gracefully evaluates to undefined rather than causing an error.

Usage Example:

const obj = { foo: { bar: { baz: 42 } }, xyz: [] };

const safeAccess = obj?.foo?.bar?.baz;

const arrayCheck = obj?.xyz?.[0]?.fn?.();

When to Use It:

Employ Optional Chaining when accessing properties or methods of deeply nested objects, especially when you’re unsure if any part might be absent.

Section 1.2: Nullish Coalescing (??) - Simplifying Default Values

The Nullish Coalescing operator provides a default value only when the variable is null or undefined. Unlike the logical OR (||), it does not consider falsy values such as 0, '', or false as triggers for defaulting.

Usage Example:

const nullValue = null;

const fallback = nullValue ?? 'default value'; // outputs 'default value'

const zeroValue = 0;

const zeroFallback = zeroValue ?? 'default value'; // outputs 0

When to Use It:

Utilize Nullish Coalescing when you specifically want to handle null or undefined values without altering other falsy values.

Section 2.1: Precision in Assignments

Merge the functionality of Nullish Coalescing with assignment using the ??= operator. This allows you to assign a default value to variables only if they are null or undefined.

Usage Example:

let mightBeNull = null;

mightBeNull ??= 'default value'; // now it's 'default value'

let hasValue = 0;

hasValue ??= 'default value'; // remains 0

Conclusion:

These operators revolutionize how we manage potential null or undefined values, simplifying our code and enhancing readability. Remember, these features are part of ECMAScript 2020, and if you're working with older browsers, you might need polyfills or transpilation to ensure compatibility.