Write modern and cleaner JavaScript with these 5 lesser-known but powerful ES6 tricks that can drastically improve your coding skills.
🔹 Destructuring Assignment
Think of destructuring as unpacking a backpack—you only pull out what you need from arrays or objects. It's a cleaner, faster way to grab values.
const user = { name: 'Imran', age: 28 };
const { name, age } = user;
console.log(name); // 'Imran'
🔹 Default Function Parameters
No more messy if undefined checks! Just set a default value inside the function's parameter list—it's simple, readable and saves time.
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest
🔹 Spread and Rest Operators
• Spread (...) expands arrays/objects
• Rest (...) collects arguments into an array
// Spread
const nums = [1, 2, 3];
const allNums = [...nums, 4, 5];
// Rest
function sum(...args) {
return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6
🔹 Template Literals
Say goodbye to string concatenation mess.
const name = 'TechQuest';
const message = `Welcome to ${name} Blog!`;
console.log(message);
🔹 Async / Await
Modern way to handle asynchronous code. No more .then() hell.
const fetchData = async () => {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
};
fetchData();
| Trick No. | ES6 Feature | Use Case |
|---|---|---|
| 1 | Destructuring | Cleaner variable access |
| 2 | Default Parameters | Handle missing arguments |
| 3 | Spread / Rest | Expand or collect values |
| 4 | Template Literals | Easier string formatting |
| 5 | Async / Await | Cleaner async code |
