JavaScript Function Parameters
Parameters are named placeholders that let a function accept input values, called arguments, each time it runs.
Parameters and Arguments
A parameter is the name you list inside the parentheses when you define a function. An argument is the actual value you pass in when you call it. The two words are often used interchangeably, but the distinction is useful: parameters belong to the definition, arguments belong to the call. When the function runs, each parameter takes on the value of the matching argument.
Passing arguments to parameters
<!DOCTYPE html>
<html>
<body>
<h2>Passing arguments to parameters</h2>
<script>
function greet(name, city) {
return "Hi " + name + " from " + city;
}
// "name" and "city" are parameters
// "Ada" and "Paris" are arguments
console.log(greet("Ada", "Paris")); // "Hi Ada from Paris"
</script>
</body>
</html>Default Parameters
You can give a parameter a default value that is used when the caller leaves that argument out or passes undefined. This avoids extra checks inside the function and makes optional inputs clear. Defaults can even reference earlier parameters or call other functions.
Providing default values
<!DOCTYPE html>
<html>
<body>
<h2>Providing default values</h2>
<script>
function priceWithTax(amount, rate = 0.1) {
return amount + amount * rate;
}
console.log(priceWithTax(100)); // 110 (uses default 0.1)
console.log(priceWithTax(100, 0.2)); // 120 (rate overridden)
</script>
</body>
</html>Rest Parameters
Sometimes you do not know in advance how many arguments will be passed. A rest parameter, written with three dots before the name, gathers all remaining arguments into a real array. It must be the last parameter in the list. This is the modern replacement for the older arguments object and works cleanly with array methods.
Collecting many arguments with rest
<!DOCTYPE html>
<html>
<body>
<h2>Collecting many arguments with rest</h2>
<script>
function total(...numbers) {
return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(total(1, 2, 3)); // 6
console.log(total(10, 20, 30, 40)); // 100
// Rest can follow fixed parameters
function label(prefix, ...items) {
return prefix + ": " + items.join(", ");
}
console.log(label("Fruits", "apple", "pear")); // "Fruits: apple, pear"
</script>
</body>
</html>Passing by Value vs Reference
Primitive values such as numbers, strings, and booleans are copied when passed, so changing a parameter inside the function does not affect the original variable. Objects and arrays are passed as references, meaning the function receives a pointer to the same data and can modify its contents. Understanding this difference prevents surprising bugs.
Primitives copy, objects share
<!DOCTYPE html>
<html>
<body>
<h2>Primitives copy, objects share</h2>
<script>
function tryToChange(x) {
x = 99;
}
let n = 5;
tryToChange(n);
console.log(n); // 5 (unchanged)
function addItem(list) {
list.push("new");
}
const arr = ["a"];
addItem(arr);
console.log(arr); // ["a", "new"] (the array was modified)
</script>
</body>
</html>Quick Reference
- Order matters: arguments fill parameters left to right.
- Place default parameters after required ones for clarity.
- Only one rest parameter is allowed, and it must come last.
- A missing argument is undefined, not an error.
