10 JavaScript Tips & Tricks Every Developer Should Know in 2024

JavaScript is constantly evolving, and keeping up with modern features can significantly improve your code quality and productivity. Here are 10 powerful tips every JS developer should know.

1. Optional Chaining (?.)

Stop writing verbose null checks. Optional chaining lets you access deeply nested properties without fear of errors.

// Old way
const city = user && user.address && user.address.city;

// Modern way
const city = user?.address?.city;

2. Nullish Coalescing (??)

Unlike the OR operator (||), the nullish coalescing operator only falls back when a value is null or undefined — not when it's 0 or an empty string.

const count = userCount ?? 0; // returns 0 if userCount is null/undefined
const name = username ?? "Guest"; // returns "Guest" only if username is null/undefined

3. Destructuring with Default Values

const { name = "Abhishek", role = "Developer", age = 25 } = user;

4. Array Flatmap

const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.flatMap(arr => arr.map(n => n * 2));
// [2, 4, 6, 8, 10, 12]

5. Promise.allSettled

Unlike Promise.all which fails on any rejection, Promise.allSettled waits for all promises and returns their results regardless of success or failure.

const results = await Promise.allSettled([
  fetch('/api/users'),
  fetch('/api/products'),
  fetch('/api/orders')
]);

6. Object.fromEntries

Convert a map or array of key-value pairs back into an object.

const entries = [['name', 'Abhishek'], ['role', 'Developer']];
const obj = Object.fromEntries(entries);
// { name: 'Abhishek', role: 'Developer' }

7. Logical Assignment Operators

// Only assign if value is null/undefined
user.name ??= "Guest";

// Only assign if value is falsy
user.role ||= "viewer";

// Only assign if value is truthy
user.admin &&= checkAdminPermissions();

8. Array.at() Method

Access elements from the end of an array easily.

const arr = [1, 2, 3, 4, 5];
arr.at(-1); // 5 (last element)
arr.at(-2); // 4

9. String replaceAll

const text = "Hello World World";
text.replaceAll("World", "JavaScript");
// "Hello JavaScript JavaScript"

10. Use WeakRef for Memory Management

When holding references to large objects, WeakRef lets the garbage collector clean them up when no longer needed, preventing memory leaks.

let cache = new WeakRef(largeObject);
// The object can be garbage collected when not in use

Conclusion

These JavaScript features are available in modern browsers and Node.js. Adopting them will make your code more readable, concise, and performant. Start applying these in your next project and watch your productivity soar!