Chapter 15: Modern ES6+ Patterns for React and Node.js Developers

Chapter 16: Modern ES6+ Patterns for React & Node.js

This final chapter covers a few remaining but important features of modern JavaScript (ES6+), especially useful when writing clean, concise, and error-free code in React.js and Node.js applications.

✅ 1. Default Parameters

Default parameters allow you to assign default values to function parameters. This prevents undefined errors when no argument is passed.

function greet(name = 'Guest') {
  return `Hello, ${name}`;
}

console.log(greet());           // Hello, Guest
console.log(greet('Zayden'));   // Hello, Zayden
  

React use case: Setting default values for props in functional components.

function Welcome({ name = 'Guest' }) {
  return <h1>Welcome, {name}</h1>;
}
  

✅ 2. Enhanced Object Literals

ES6 allows you to simplify object creation when property names and variables are the same.

const name = 'React';
const version = 18;

const framework = { name, version };
console.log(framework);
// { name: 'React', version: 18 }
  

Bonus: You can also define functions directly in the object:

const api = {
  baseURL: 'https://api.site.com',
  fetch() {
    console.log('Fetching...');
  }
};
  

✅ 3. Optional Chaining (`?.`)

Optional chaining lets you safely access nested object properties without throwing an error if a property doesn’t exist.

const user = {
  profile: {
    email: 'test@example.com'
  }
};

console.log(user?.profile?.email);   // 'test@example.com'
console.log(user?.account?.name);    // undefined (no error)
  

React use case: Safely accessing props, context, or deeply nested state.

const username = user?.profile?.username ?? 'Guest';
  

✅ 4. Nullish Coalescing (`??`)

This operator returns the right-hand value only when the left-hand value is null or undefined — not when it’s falsy like 0 or ''.

const name = null;
console.log(name ?? 'Guest'); // Guest

const count = 0;
console.log(count ?? 10);     // 0 (not 10)
  

React use case: Setting fallback values for props or form inputs without overwriting valid falsy values like 0 or ''.

📘 Assignments: Practice Modern Patterns

1. Create a function that takes 2 parameters and sets a default for one. Log the output with and without arguments.
2. Define an object using enhanced object literal syntax with variables firstName and age.
3. Access a deeply nested property using optional chaining and log a default fallback using ??.
4. Build a simple React component using props?.name ?? 'Guest' to greet users safely.

📌 Summary

• Default Parameters: Avoid undefined arguments with preset values.
• Enhanced Object Literals: Cleaner syntax when keys and variables match.
• Optional Chaining: Safe property access without crashing.
• Nullish Coalescing: Handle null or undefined with fallback values.
• These features improve stability, readability, and safety in real-world React & Node apps.