Javascript Module 49

   Module 49 : Default Parameters. 

What Are Default Parameters?

In JavaScript, default parameters allow you to set default values for function parameters if no value is provided or if the value is undefined.

               

 Why Use Default Parameters?

Makes your code cleaner and more robust

Prevents undefined values in function logic

Eliminates the need for manual checks like if (param === undefined)

 Syntax and Explanation

function greet(name = "Guest") { console.log("Hello, " + name + "!"); } greet(); // Output: Hello, Guest! greet("Rehana"); // Output: Hello, Rehana!

🔍 Explanation:

name = "Guest" sets a default value.

If greet() is called without an argument, name becomes "Guest".

Internal

Mechanism & Behavior

JavaScript checks function parameters in this order:

Was an argument passed?

Is it explicitly undefined?

If yes to either, use default value.

function test(a = 1) { console.log(a); } test(undefined); // Uses default → 1 test(null); // null is a value → prints null

Key Point:

undefined triggers default value, but null, 0, false, or "" do NOT.

Examples

✅ Example 1: API Request Defaults

                 

function fetchData(url, method = "GET") { console.log(`Fetching ${url} using ${method}`); } fetchData("https://api.example.com"); // method defaults to "GET"

✅ Example 2: Mathematical Operation with Defaults

function multiply(a, b = 1) { return a * b; } console.log(multiply(5)); // 5 (uses b = 1) console.log(multiply(5, 2)); // 10

 Exercises 

 Exercise 1:

Create a function createUser(name, role = "User") that logs a welcome message.

function createUser(name, role = "User") { console.log(`Welcome ${name}! Your role is ${role}.`); } createUser("Ali"); // Welcome Ali! Your role is User. createUser("Sara", "Admin"); // Welcome Sara! Your role is Admin.

💡 Exercise 2:

Fix the code:

function calculateTotal(price, tax) { tax = tax || 0.1; return price + price * tax; }

🔧 Update using default parameters:

function calculateTotal(price, tax = 0.1) { return price + price * tax; }

Why better?

Because || will override tax = 0 as false and change behavior.

Compare Old vs Modern Approach

 Objective:

Show difference between manual default handling and ES6 default parameters.

 Step 1: Old Manual Defaults

function legacyGreet(name) { name = typeof name !== "undefined" ? name : "Guest"; console.log("Hi, " + name); }

Step 2: Modern Default Parameters

function modernGreet(name = "Guest") { console.log("Hi, " + name); }

Run both and observe: 

 

 

Code length

Readability

Edge cases like undefined, null, or ""

 Research 

 Research Insight 1: Evaluation Order

                 

let counter = 0; function log(a = counter += 1) { console.log(a); } log(); // 1 log(); // 2

Default parameters are evaluated at call time, not function definition time.

Research Insight 2: Default with Destructuring

function showProfile({name = "Anonymous", age = 0} = {}) { console.log(`${name} is ${age} years old.`); } showProfile(); // Anonymous is 0 years old. showProfile({name: "Zara"}); // Zara is 0 years old.

  Common Mistakes to Avoid

Mistake

Fix

Relying on `

Using default parameters before required ones

Always place default params at the end

Expecting default to apply for null, 0, or false

Only undefined triggers default

Write a function registerUser(email, password = "123456", isAdmin = false) and test the following cases:

               

registerUser("user@example.com"); registerUser("admin@example.com", "securepass", true); registerUser("guest@example.com", "", true);

Expected Results:

Default values must apply only when not passed or undefined, not when passed as "" or false.

📘 Summary

Feature

Description

Introduced in

ES6

Triggered when

Argument is undefined

Not triggered when

Argument is null, false, "", 0

Benefits

Cleaner code, safer defaults, better readability

   Checklist

             

✅ Understood default parameter syntax

✅ Applied in use cases

✅ Compared old vs modern approach

✅ Completed challenge