Hey there! 👋
You can write JavaScript. You can make things happen. But sometimes, your code feels longer than it needs to be. You find yourself writing the same few lines over and over again, and you have a sneaking suspicion there's a shorter, smarter way to do it.
You're absolutely right.
This isn't about complex algorithms. This is about the practical, everyday shortcuts that clean up your code, make it more readable, and save you precious keystrokes. These are the modern JavaScript tricks that instantly make you look like a seasoned pro.
Let's unlock them.
1. The Double Trouble?? Nullish Coalescing Operator
The Problem: You want to use a default value if a variable is null or undefined, but you're scared of using the logical OR (||) operator because it returns the right-hand value for all falsy values (0, '', false).
The Hack: Use the Nullish Coalescing Operator (??). It only returns the right-hand side if the left-hand side is null or undefined.
// ✅ Solution with Nullish Coalescing (??)
function getVolume(config) {
const volume = config.volume ?? 50; // If volume is 0, it stays 0!
return volume;
}
getVolume({ volume: 0 }); // Returns 0 (correct!)
Why it's awesome: It gives you precise control and prevents bugs when dealing with numbers, strings, or booleans that might legitimately be falsy.
2. Optional Chaining: Your Guard Against Cannot Read Property of Undefined
The Problem: You need to access a deeply nested property in an object, but you're not sure if every level exists. You resort to a messy chain of if statements or the ternary operator.
// 🚫 The old, safe way (so verbose!)
const city = user && user.address && user.address.city;
The Hack: Use the Optional Chaining Operator (?.). It short-circuits and returns undefined if any part of the chain is null or undefined.
// ✅ The new, safe way (so clean!)
const city = user?.address?.city; // If user or address is undefined, city becomes undefined.
Why it's awesome: It makes your code incredibly concise and readable, completely eliminating those annoying runtime errors from nested data.
3. Dynamic Object Keys Made Easy
The Problem: You need to create an object where the key name is based on a variable. The old way requires creating the object first, then using bracket notation to set the key.
// 🚫 The clunky way
const dynamicKey = 'name';
const person = {};
person[dynamicKey] = 'Alex';
// { name: 'Alex' }
The Hack: Use Computed Property Names in your object literal directly by wrapping the variable in square brackets [].
// ✅ The slick way
const dynamicKey = 'name';
const person = {
age: 28
};
// { name: 'Alex', age: 28 }
Why it's awesome: It lets you define dynamic keys in a single, clean step right inside the object declaration.
4. The Almighty Array Destructuring Swap
The Problem: You want to swap the values of two variables. The classic method requires a temporary third variable.
// 🚫 The old-school way
let a = 'hello';
let b = 'world';
let temp = a;
a = b;
b = temp;
The Hack: Swap them in one line using Array Destructuring. It's like magic.
// ✅ The modern one-liner
let a = 'hello';
let b = 'world';
[a, b] = [b, a]; // Swap achieved!
console.log(a); // 'world'
console.log(b); // 'hello'
Why it's awesome: It's a clever, concise trick that is both impressive and practical, eliminating the need for a temporary variable.
5. Template Literals Aren't Just For Strings
The Problem: You have multi-line strings and you're tired of using \n and concatenation with +.
The Hack: Use Template Literals (backticks) for multi-line strings and embedding expressions seamlessly.
// 🚫 The messy way
const name = 'Sarah';
const message = 'Hello ' + name + ',\n' +
'Thank you for your order.\n' +
'We hope you enjoy your product.';
// ✅ The clean, modern way
const name = 'Sarah';
const message = `Hello ${name},
Thank you for your order.
We hope you enjoy your product.`; // Expressions go in ${}
Why it's awesome: It makes creating HTML fragments, messages, or any multi-line string an absolute breeze.
Final Thought
JavaScript is constantly evolving. Embracing these modern syntax features doesn't just make your code shorter—it makes it more robust, expressive, and enjoyable to write.
Pick one trick that solves a problem you face daily and use it. Soon, it'll be second nature!💻✨
What's your favorite JavaScript shortcut? Share it in the comments below!
Top comments (0)