JavaScript ES6: Understanding Default Parameters
🎯 What Are Default Parameters in JavaScript?
Imagine going to a coffee shop, and the barista automatically gives you a cappuccino because you didn't specify your order. That’s what JavaScript ES6 Default Parameters do! 🎉
📌 Before ES6: The Struggle Was Real
Before ES6, we had to manually check if a function parameter was provided. If not, we assigned a default value like this:
const greet = (name) => {
name = name || 'Stranger';
console.log(`Hello, ${name}!`);
}
greet('Alice'); // Output: Hello, Alice!
greet(); // Output: Hello, Stranger!
This was okay but not elegant. JavaScript developers wanted a cleaner solution. And then came ES6... 🚀
✅ ES6 Default Parameters: The Smart Way
With ES6, we can directly assign default values in the function parameters. Check this out:
const greet = (name = 'Stranger') => {
console.log(`Hello, ${name}!`);
}
greet('Alice'); // Output: Hello, Alice!
greet(); // Output: Hello, Stranger!
Much cleaner, right? No more `name = name || 'Stranger'` nonsense! 😎
🤔 Why Use Default Parameters?
- 💡 Prevents `undefined` values
- 🚀 Simplifies code
- ⏳ Saves time (because we devs are lazy 😂)
- 🎯 Improves code readability
🛠 More Fun with Default Parameters
Example 1: Calculating Discounted Price
const calculatePrice = (price, discount = 0.10) => {
return price - (price * discount);
}
console.log(calculatePrice(100)); // Output: 90
console.log(calculatePrice(100, 0.20)); // Output: 80
Example 2: Multiplication Table
const multiplicationTable = (num = 1) => {
for(let i = 1; i <= 10; i++) {
console.log(`${num} x ${i} = ${num * i}`);
}
}
multiplicationTable(5); // Outputs table of 5
multiplicationTable(); // Outputs table of 1
🚀 Advanced Use Cases
Default Parameters with Objects
const userInfo = (user = { name: 'Guest', age: 18 }) => {
console.log(`User: ${user.name}, Age: ${user.age}`);
}
userInfo({ name: 'Alice', age: 25 });
userInfo();
Using Functions as Default Parameters
const randomNumber = () => Math.floor(Math.random() * 100);
const showNumber = (num = randomNumber()) => {
console.log(`Generated number: ${num}`);
}
showNumber(); // Outputs a random number
showNumber(42); // Outputs 42
🎉 Final Thoughts
Default Parameters in ES6 are a game-changer! They make your code cleaner, smarter, and easier to read. Now, go and use them in your projects! 🚀
