Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Svelte Vue

Use Optional Chaining (`?.`) Safely in JavaScript

1 min read .
Updated on
Use Optional Chaining (`?.`) Safely in JavaScript

Optional chaining (?.) lets JavaScript stop a property-access chain when the value immediately before ?. is null or undefined. Instead of throwing, the expression evaluates to undefined.

Nested Properties

const user = {
  profile: {
    name: 'Alice',
    address: { city: 'Wonderland' },
  },
};

const city = user.profile?.address?.city;
const postalCode = user.profile?.address?.postalCode;

postalCode is undefined rather than causing an error.

Dynamic Property Access

const key = 'name';
const name = user.profile?.[key];

Optional Method Calls

const name = user.profile?.getName?.();

If getName is null or undefined, the result is undefined. If it exists but is not callable, JavaScript still throws a TypeError.

Arrays

const users = [{ name: 'Alice' }, { name: 'Bob' }];

const second = users?.[1]?.name; // Bob
const third = users?.[2]?.name;  // undefined

Combine with ??

const displayName = user.profile?.name ?? 'Guest';

This is a common pattern for reading optional data and supplying a fallback.

Do Not Hide Required Data Problems

Optional chaining is useful when absence is expected. If a property is required by your application contract, silently converting a missing value to undefined can hide a bug. Validate required data explicitly.

Conclusion

Use ?. for genuinely optional object paths, dynamic properties, array elements, and methods. Combine it with ?? for defaults, but do not use it to avoid validating data that should always exist.

JavaScript

Related Posts

Access JavaScript Array Elements with `at()`
Updated on
Access JavaScript Array Elements with `at()`
Array.prototype.at() returns the element at a given integer index. Its main advantage over bracket notation is support for negative indexes. Positive Indexes Copy const fruits = ['apple', 'banana', 'cherry']; console.log(fruits.at(0)); // 'apple' console.log(fruits.at(1)); // 'banana' Negative Indexes Copy console.log(fruits.at(-1)); // 'cherry' console.log(fruits.at(-2)); // 'banana' Without at(), the traditional equivalent for the last element is:
JavaScript Array
Get Every RegExp Match with `String.matchAll()`
Updated on
Get Every RegExp Match with `String.matchAll()`
String.prototype.matchAll() returns an iterator containing every match of a global regular expression, including capturing groups and match indexes. Copy const text = 'Order #123, Order #456, Order #789'; const regex = /Order #(\d+)/g; for (const match of text.matchAll(regex)) { console.log(match[0], match[1], match.index); } Named Capturing Groups Copy const text = 'John: 123, Jane: 456'; const regex = /(?<name>\w+): (?<number>\d+)/g; for (const match of text.matchAll(regex)) { console.log(match.groups.name, match.groups.number); } Convert the Iterator to an Array Copy const matches = [...'cat bat mat'.matchAll(/\b(\w+)at\b/g)]; This is convenient when you need map, filter, or other array operations, but iterating directly avoids storing all matches at once.
JavaScript Array
Handle Multiple Promises with `Promise.allSettled()`
Updated on
Handle Multiple Promises with `Promise.allSettled()`
Promise.allSettled() waits until every input promise has either fulfilled or rejected, then returns the outcome of each operation. Unlike Promise.all(), one rejection does not stop you from receiving the other results. Copy const tasks = [ Promise.resolve('first result'), Promise.reject(new Error('second failed')), Promise.resolve('third result'), ]; const results = await Promise.allSettled(tasks); for (const result of results) { if (result.status === 'fulfilled') { console.log('Value:', result.value); } else { console.error('Error:', result.reason); } } Each result has one of these shapes:
JavaScript Array
JavaScript BigInt: Handling Large Integers
Updated on
JavaScript BigInt: Handling Large Integers
JavaScript Number can represent integers exactly only up to Number.MAX_SAFE_INTEGER (2^53 - 1). When you need larger integer values without losing precision, use BigInt. Create a BigInt Copy const a = 123456789012345678901234567890n; const b = BigInt('123456789012345678901234567890'); The n suffix creates a BigInt literal. BigInt() is useful when converting a string or an integer-valued Number.
JavaScript
JavaScript Nullish Coalescing Operator (`??`)
Updated on
JavaScript Nullish Coalescing Operator (`??`)
The nullish coalescing operator, ??, provides a fallback only when the left-hand value is null or undefined. Copy const username = null; const name = username ?? 'Guest'; console.log(name); // Guest ?? vs. || || falls back for every falsy value. ?? preserves valid falsy data such as 0, false, and '':
JavaScript
JavaScript Numeric Separators (`_`)
Updated on
JavaScript Numeric Separators (`_`)
JavaScript numeric separators let you place underscores inside numeric literals to improve readability. They do not change the numeric value. Copy const million = 1_000_000; console.log(million); // 1000000 Decimal Fractions Copy const pi = 3.141_592_653; Binary, Octal, and Hexadecimal Copy const binary = 0b1010_1011; const octal = 0o123_456; const hex = 0xFF_FF_FF; Separators can also be used in BigInt literals:
JavaScript
chevron-up