Default parameters
Values a function parameter gets when the argument is not passed or is undefined.
Example
#function createPlayer(name = 'Guest', level = 1) {
return `${name}, level ${level}`
}
console.log(createPlayer('Emma', 5))
console.log(createPlayer('Jack'))
console.log(createPlayer())Definition and usage
#You write a default parameter in the function definition with an equals sign: function greet(name = "Guest"). If you omit the argument at the call site, or pass undefined, the parameter gets the default value. That way the function doesn’t have to check for itself whether it received the data.
The default value only kicks in for undefined. Passing null, 0, false, or an empty string is a deliberate choice of value, so it’s used as is. That’s what sets default parameters apart from the older name = name || "Guest" pattern, which also replaced valid data, like zero.
The default expression is evaluated on every call where it’s needed, not once when the function is defined. So every call with items = [] gets a new, empty array. A default value can use earlier parameters, e.g. (points, bonus = points / 2), and it combines with destructuring: function setup({ theme = "dark" } = {}).
Syntax
#function name(param = defaultValue) {}
const fn = (a, b = a * 2) => {}
function name({ key = value } = {}) {}More examples
#function setVolume(volume = 50) {
return volume
}
console.log(setVolume(undefined))
console.log(setVolume(null))
console.log(setVolume(0))
function oldSetVolume(volume) {
volume = volume || 50
return volume
}
console.log(oldSetVolume(0))The old pattern with || turned the valid volume 0 into 50. The default parameter left the zero alone, because it only reacts to undefined.
function createTask(title, points = 10, bonus = points / 2) {
return { title, points, bonus }
}
console.log(createTask('Quiz'))
console.log(createTask('Project', 40))function startLesson({ speed = 1, subtitles = true } = {}) {
return `Speed ${speed}x, subtitles: ${subtitles ? 'on' : 'off'}`
}
console.log(startLesson({ speed: 1.5 }))
console.log(startLesson())The trailing = {} means the function can be called with no argument. Without it, destructuring undefined would throw a TypeError.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Put parameters with default values at the end of the list. Then you only need to omit the last arguments, instead of passing
undefinedin the middle. - For an options object, add
= {}for the whole parameter. Without it, calling the function with no argument throws aTypeErrorduring destructuring. - When you also want to replace
null, use the??operator in the function body:const size = input ?? 16.
Related entries
#- functionDeclares a named function: a block of code with parameters that you can call any number of times and that can return a result.
- DestructuringDestructuring pulls values out of arrays and objects straight into separate variables.
- ??The ?? (nullish coalescing) operator returns the right side only when the left side is null or undefined. Ideal for default values.
- Rest parameter (...rest)Collects all the remaining function arguments into a real array. You write it as ...name at the end of the parameter list.
- () => {}An arrow function: a shorter function syntax, with no own this, and an implicit return for a single expression.
Spotted a mistake or missing an example? Write to us.