Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Parameters, Arguments & Default Values
Parameters are the inputs your function accepts. Default values provide fallbacks when arguments aren't passed. The rest parameter (...args) collects multiple arguments into an array.
Parameters & Defaults
- Parameters - Variable names in function definition: function greet(name, age) { }
- Arguments - Actual values passed when calling: greet('Alice', 25)
- Default values - Fallback if not provided: function greet(name = 'Guest') { }
- Rest parameter - Collects remaining args: function sum(...numbers) { }. numbers is an array
- Arguments object - Available in regular functions (not arrow): arguments[0], arguments[1]
Parameters Code
// Basic parameters
function introduce(name, age) {
console.log(`I'm ${name}, ${age} years old.`);
}
introduce("Alice", 25);
// Default values
function greet(name = "Guest", greeting = "Hello") {
console.log(`${greeting}, ${name}!`);
}
greet(); // "Hello, Guest!"
greet("Alice"); // "Hello, Alice!"
greet("Bob", "Hey"); // "Hey, Bob!"
// Rest parameter (...args)
function sum(...numbers) {
let total = 0;
for (const num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100
// Real-world: create HTML element
function createElement(tag, text, className = "") {
return `<${tag} class="${className}">${text}</${tag}>`;
}
console.log(createElement("h1", "Hello", "title"));
console.log(createElement("p", "World")); // no classTip
Tip
Always provide default values for optional parameters: function greet(name = 'Guest'). This prevents undefined from appearing in your output and makes your functions more robust against missing arguments.
Function + environment.
Common Mistake
Warning
Using default values that are objects or arrays creates a shared reference trap in some languages, but in JS each call creates a fresh default. However, mutating a default object parameter can still cause unexpected behavior - always create new objects inside.
Practice Task
Note
Build a configurable greeting function: (1) Parameters: name (required), greeting (default: 'Hello'), punctuation (default: '!'). (2) Use the rest parameter (...hobbies) to list hobbies. (3) Test with varying numbers of arguments.
Quick Quiz
Key Takeaways
- Parameters are the inputs your function accepts.
- Parameters - Variable names in function definition: function greet(name, age) { }
- Arguments - Actual values passed when calling: greet('Alice', 25)
- Default values - Fallback if not provided: function greet(name = 'Guest') { }