Top 5 JavaScript Features You’re Not Using Enough

JavaScript has evolved dramatically over the years, introducing features that make coding more efficient, readable, and powerful. Yet, many developers stick to old habits and miss out on some incredibly useful features. Let’s dive into five JavaScript features you’re likely not using enough—and why you should start using them today.

---

1. Optional Chaining (?.)

Have you ever written multiple if statements to check for nested object properties? Optional chaining simplifies this and reduces the risk of runtime errors when accessing deeply nested properties.

Example:

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

// Without Optional Chaining
const city = user && user.address ? user.address.city : undefined;

// With Optional Chaining
const city = user?.address?.city;

console.log(city); // 'New York'

Why You Should Use It:

• Eliminates the need for repetitive null checks.
• Makes your code cleaner and easier to read.

---

2. Nullish Coalescing Operator (??)

The ?? operator is a great alternative to || for providing default values. Unlike ||, it only considers null and undefined as nullish, so it doesn’t mistakenly treat false, 0, or '' as nullish.

Example:

const input = 0;

// Using OR (||)
const value = input || 10; // 10 (undesirable)

// Using Nullish Coalescing (??)
const value = input ?? 10; // 0 (desirable)

console.log(value);

Why You Should Use It:

• Helps you avoid unintended fallbacks.
• Perfect for handling default values in a predictable way.

---

3. Dynamic Imports

Dynamic imports let you load JavaScript modules conditionally or on demand. This is especially useful for improving performance in large applications by splitting your code into smaller chunks.

Example:

if (user.isAdmin) {
  import('./adminPanel.js').then(module => {
    module.loadAdminPanel();
  });
}

Why You Should Use It:

• Reduces initial load time by deferring loading of non-critical code.
• Essential for implementing lazy loading in modern web apps.

---

4. Promise.allSettled

When dealing with multiple promises, sometimes you want to know the outcome of each promise, whether it’s fulfilled or rejected. Unlike Promise.all, which fails fast on the first rejection, Promise.allSettled gives you a complete picture.

Example:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Error'),
  Promise.resolve('Another success')
];

Promise.allSettled(promises).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Fulfilled:', result.value);
    } else {
      console.log('Rejected:', result.reason);
    }
  });
});

Why You Should Use It:

• Handles mixed results gracefully without halting execution.
• Ideal for scenarios where you want to handle all outcomes individually.

---

5. Logical Assignment Operators (&&=, ||=, ??=)

These shorthand operators combine logical operations and assignments, making your code more concise.

Example:

let user = {
  isLoggedIn: false,
  preferences: null
};

// Using Logical Assignment Operators
user.isLoggedIn ||= true; // Sets to true if false or undefined
user.preferences ??= { theme: 'dark' }; // Sets if null or undefined

console.log(user);
// { isLoggedIn: true, preferences: { theme: 'dark' } }

Why You Should Use It:

• Reduces redundancy in your code.
• Enhances readability, especially for state updates or object modifications.

---

Final Thoughts

These modern JavaScript features are more than just syntactic sugar—they're tools to write cleaner, safer, and more efficient code. If you’re not using them yet, now’s the perfect time to start.

Which of these features do you find most useful? Or is there one you’re already using that has transformed your coding experience? Share your thoughts in the comments below!

Follow and Subscribe:

• YouTube: devDive with Dipak
• Website: Dipak Ahirav
• Whatsapp Channel:DevDiveWithDipak
• Email: [e-mail]
• LinkedIn: Dipak Ahirav