JavaScript Functions
JavaScript Default Parameters
JavaScript default parameters give a parameter a value to use when no argument is passed.
Without a default, a missing argument becomes undefined.
A default makes the function easier to call and stops surprising results.
Example
Example
javascript
function greet(name = "friend") {
return "Hello " + name;
}
console.log(greet("Ada"));
console.log(greet());The first call uses "Ada".
The second call has no argument, so the default "friend" is used.
What are Default Parameters?
A default parameter is written with an equals sign in the function definition.
The default is only used when the argument is missing or undefined.
This was added in ES6 and works in every modern browser.
Syntax
Syntax
javascript
function name(parameter = defaultValue) {
// code to run
}Any value can be a default: a number, a string, an array, or an object.
Defaults with Numbers
A default is useful for optional settings such as a quantity or a rate.
Example
Example
javascript
function total(price, quantity = 1) {
return price * quantity;
}
console.log(total(50));
console.log(total(50, 3));Calling with one argument uses the default quantity of 1.
Only undefined Triggers the Default
The default is not used for null, 0 or an empty string.
Those are real values, so JavaScript keeps them.
Example
Example
javascript
function show(value = "default") {
return value;
}
console.log(show(undefined));
console.log(show(null));
console.log(show(0));Only the first call uses the default.
Put Defaults Last
If a default comes first, you have to pass undefined to skip it.
Keeping defaults at the end makes the function much easier to call.
Example
Example
javascript
function order(item, quantity = 1, note = "none") {
return item + " x" + quantity + " (" + note + ")";
}
console.log(order("Pen"));
console.log(order("Pen", 5));Each call only passes what it needs.
Using an Earlier Parameter
A default can be built from a parameter defined before it.
Example
Example
javascript
function rectangle(width, height = width) {
return width * height;
}
console.log(rectangle(4));
console.log(rectangle(4, 6));With one argument the shape is a square, because height copies width.
Defaults with Objects and Arrays
A default can also be an empty array or object, which avoids errors later.
Example
Example
javascript
function listNames(names = []) {
return names.length + " names";
}
console.log(listNames());
console.log(listNames(["Ada", "Grace"]));Without the default, the first call would fail when reading length.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Default Parameters</title>
</head>
<body>
<h1>JavaScript Default Parameters</h1>
<p id="result"></p>
<script>
function total(price, quantity = 1) {
return price * quantity;
}
document.getElementById("result").innerHTML =
"One pen: " + total(50) + "<br>Five pens: " + total(50, 5);
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try changing the default:
Set the default quantity to 2 and see how the first line changes.
Important Points
- A default parameter is written with an equals sign in the definition.
- The default is used only when the argument is missing or
undefined. null,0and empty strings do not trigger the default.- Put parameters with defaults at the end of the list.
- A default can be built from an earlier parameter.
Conclusion
JavaScript default parameters make functions easier and safer to call.
They remove the need to check for missing values at the top of every function.
Understanding defaults helps you design functions with sensible optional settings.