JavaScript Concise Idioms & Shorthands Cheatsheet

Idiomatic modern JavaScript shorthand expressions that replace verbose boilerplate patterns.

Essential Shorthand Patterns

Nullish Coalescing (??) & Default Fallbacks

// ?? checks strictly for null or undefined (preserves 0 and false)
const port = process.env.PORT ?? 3000;

// || falls back on any falsy value (0, '', false, NaN)
const title = customTitle || 'Untitled';

Optional Chaining (?.)

// Safely navigate deeply nested objects without TypeError
const street = user?.address?.street;
const firstTag = user?.tags?.[0];
const result = user?.getProfile?.();

Short-Circuit Execution (&&)

// Run function only if condition holds true
isLoggedIn && showDashboard();

Object Property & Method Shorthand

const name = 'Alice';
const age = 30;

// Object literal shorthand
const user = {
  name,
  age,
  greet() {
    return `Hello ${this.name}`;
  }
};

Array & Object Destructuring

const { name, age, role = 'member' } = user;
const [first, second, ...rest] = [1, 2, 3, 4, 5];

References

• MDN: Optional Chaining (?.)
• MDN: Nullish Coalescing (??)