JavaScript Function Parameters

Passing data into functions for flexible programming

📥 What are Function Parameters?

Parameters are variables that allow functions to accept input values. They make functions flexible and reusable by letting you pass different data each time you call the function. 


// Function with parameters
function greetPerson(name, age) {
    return `Hello ${name}, you are ${age} years old!`;
}

// Calling with different arguments
console.log(greetPerson("Alice", 25));
console.log(greetPerson("Bob", 30));

Output:

Hello Alice, you are 25 years old!
Hello Bob, you are 30 years old!

Types of Parameters

1️⃣

Single Parameter

Function accepts one input 

function square(number) {
    return number * number;
}
🔢

Multiple Parameters

Function accepts several inputs 

function add(a, b, c) {
    return a + b + c;
}
⚙️

Default Parameters

Parameters with default values 

function greet(name = "Friend") {
    return `Hello, ${name}!`;
}
📦

Rest Parameters

Accept unlimited parameters 

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b);
}

🔹 Basic Parameters

Functions can accept one or more parameters: 

// Single parameter
function doubleNumber(num) {
    return num * 2;
}

// Multiple parameters
function calculateRectangleArea(width, height) {
    return width * height;
}

// Using the functions
console.log(doubleNumber(5));                    // 10
console.log(calculateRectangleArea(4, 6));       // 24

// Parameters vs Arguments
// Parameters: variables in function definition (width, height)
// Arguments: actual values passed when calling (4, 6)

Output:

10
24

🔹 Default Parameters

You can set default values for parameters: 

// Function with default parameters
function createUser(name, role = "user", active = true) {
    return {
        name: name,
        role: role,
        active: active
    };
}

// Calling with different numbers of arguments
console.log(createUser("Alice"));                    // Uses defaults
console.log(createUser("Bob", "admin"));             // Overrides role
console.log(createUser("Charlie", "moderator", false)); // Overrides all

// Default parameters help prevent errors
function divide(a, b = 1) {
    return a / b;
}

console.log(divide(10));    // 10 (uses default b = 1)
console.log(divide(10, 2)); // 5

Output:

{name: "Alice", role: "user", active: true}
{name: "Bob", role: "admin", active: true}
{name: "Charlie", role: "moderator", active: false}
10
5

🔹 Rest Parameters

Rest parameters allow functions to accept unlimited arguments: 

// Rest parameters collect all arguments into an array
function sumAll(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}

// Can pass any number of arguments
console.log(sumAll(1, 2, 3));           // 6
console.log(sumAll(1, 2, 3, 4, 5));     // 15
console.log(sumAll(10, 20));            // 30

// Rest parameters with other parameters
function introduce(firstName, lastName, ...hobbies) {
    return `Hi, I'm ${firstName} ${lastName}. I like: ${hobbies.join(", ")}`;
}

console.log(introduce("John", "Doe", "reading", "coding", "gaming"));

// Using array methods with rest parameters
function findMax(...numbers) {
    return Math.max(...numbers);
}

console.log(findMax(5, 2, 9, 1, 7)); // 9

Output:

6
15
30
Hi, I'm John Doe. I like: reading, coding, gaming
9

🔹 Parameter Best Practices

Tips for working with function parameters:

✅ Good Practices:

  • Use descriptive names: calculateTax(income, rate) not calc(a, b)
  • Limit parameter count: Too many parameters make functions hard to use
  • Use default values: Prevent errors and make functions more flexible
  • Order parameters logically: Required first, optional last 
// Good: Clear parameter names and defaults
function formatCurrency(amount, currency = "USD", decimals = 2) {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: currency,
        minimumFractionDigits: decimals
    }).format(amount);
}

console.log(formatCurrency(1234.56));           // $1,234.56
console.log(formatCurrency(1234.56, "EUR"));    // €1,234.56
console.log(formatCurrency(1234.56, "USD", 0)); // $1,235

// Using object parameters for many options
function createButton({text, color = "blue", size = "medium", disabled = false}) {
    return ``;
}

console.log(createButton({text: "Click me"}));
console.log(createButton({text: "Submit", color: "green", size: "large"}));

🧠 Test Your Knowledge

What are the actual values passed to a function called?