Parameter
A named input in the function definition.
Platform under construction
Parameters & Arguments
Parameters define the inputs a function expects. Arguments are the actual values passed when the function is called.
function createLabel(name = "Untitled") {
return `Label: ${name}`;
}
console.log(createLabel("Settings"));
Functions & Scope
Good parameters make a function easy to call correctly.
Parameters are the names listed in a function definition. Arguments are the values supplied at call time. The distinction matters when reading errors and designing APIs.
JavaScript supports default parameters, rest parameters and destructured parameters. These tools help make function inputs explicit and flexible.
Avoid functions with long, mysterious argument lists. When a function needs many options, an options object is usually easier to read.
Argument
A value passed into a function call.
Default parameter
Fallback value when an argument is missing or undefined.
Rest parameter
Collects remaining arguments into an array.
Examples
Functions become readable when input, output and scope are visible.
Options object with defaults
function createButtonLabel({ text, count = 0 }) {
return `${text} (${count})`;
}
createButtonLabel({ text: "Messages", count: 3 });
Unclear positional arguments
createButtonLabel("Messages", 3, true, false);
// The call is compact, but the meaning of each value is hidden.
Code patterns
Reusable examples for quick reference.
These examples focus on syntax you will actually look up later: declarations, callbacks, returns, closures and context handling. Use the small patterns first, then study the deeper explanation.
Default parameter
Provide a fallback for missing input.
function createLabel(value = "Untitled") {
return `Label: ${value}`;
}
console.log(createLabel());
Rest parameter
Collect any number of values into an array.
function sum(...numbers) {
return numbers.reduce((total, value) => total + value, 0);
}
console.log(sum(1, 2, 3));
Options object
Named options make calls easier to understand.
function formatStatus({ status, uppercase = false }) {
const label = `Status: ${status}`;
return uppercase ? label.toUpperCase() : label;
}
console.log(formatStatus({ status: "ready", uppercase: true }));
Destructured parameter
Extract named properties directly in the parameter list.
function getUserLabel({ name, role }) {
return `${name} (${role})`;
}
console.log(getUserLabel({ name: "User A", role: "admin" }));
Rules that matter
Keep behavior small, named and testable.
Functions are where JavaScript stops being a list of statements and becomes a system. Scope decides what each function can see, while return values and parameters decide how functions communicate.
Keep parameter lists short
Many positional parameters are hard to call correctly.
Use defaults for optional values
Defaults document fallback behavior.
Use rest for many values
Rest parameters are clearer than the old arguments object.
Use options objects for configuration
Named properties make calls self-documenting.
Validate important inputs
Parameters describe shape, but runtime values can still be wrong.
Avoid mutating input objects
A function should not surprise callers by changing their data.
Production thinking
Good functions reduce the amount of code you must hold in your head.
Why does this matter?
Function inputs are the contract between caller and function. A good contract prevents wrong calls.
Accessibility
UI helper functions often accept labels, roles and state. Clear parameters help prevent missing or unclear accessible text.
Production note
Production functions should use explicit parameters, defaults and validation around external input.
SEO note
Functions that generate content should make required text values obvious through clear parameters.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add an uppercase option to createBadge.
- Remove count from the function call and watch the default parameter work.
- Rewrite createBadge with two positional parameters and compare readability.
Practice assignment
Do this before moving to the next topic.
- Write one function with a default parameter.
- Write one function with a rest parameter.
- Write one function that accepts an options object.
Try it yourself
Use an options object
Self-check
Before you continue, prove that you understand Parameters & Arguments.
Functions only become useful when you can explain what goes in, what comes out and which scope the function can see.
- Can you explain parameter versus argument?
- Can you explain default parameters?
- Can you explain rest parameters?
- Can you explain why options objects improve readability?
- Can you explain why input validation still matters?