JavaScript Functions
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
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.
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
javascript
function name(parameter = defaultValue) {
// code to run
}Any value can be a default: a number, a string, an array, or an object.
A default is useful for optional settings such as a quantity or a rate.
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.
The default is not used for null, 0 or an empty string.
Those are real values, so JavaScript keeps them.
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.
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
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.
A default can be built from a parameter defined before it.
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.
A default can also be an empty array or object, which avoids errors later.
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
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>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.
undefined.null, 0 and empty strings do not trigger the default.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.