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! 🚀

🔗 Share This Article

Share on Twitter