Skip to main content Accessibility Feedback

Default parameter values in vanilla JS

Today, we’re going to learn how to assign default parameter values with vanilla JS.

Let’s imagine you have a function that adds two numbers together.

function add (num1, num2) {
	return num1 + num2;
}

// Add 4 and 2
// returns 6
add(4, 2);

If you don’t pass in a value for an argument, your script will use undefined. This can result in some unexpected results.

// returns "NaN"
add(3);

To address this, you historically needed to either make sure all required parameters were assigned an argument, or check for values in your function and reassign values to them.

// Approach 1: Make sure values are assigned
function add (num1, num2) {

	// If num1 or num2 aren't defined, throw an error
	if (!num1 || !num2) {
		throw 'Please provide two numbers to add together';
	}

	// Add the numbers
	return num1 + num2;

}

// Approach 2: Reassign values
function add (num1, num2) {

	// Reassign values if none are provides
	num1 = !num1 ? 0 : num1;
	num2 = !num2 ? 0 : num2;

	// Add the numbers
	return num1 + num2;

}

But ES6 introduced a powerful new way to handle this: default parameters.

You can set a default value for each parameter by adding = default value when defining it. In this example, both num1 and num2 will get a value of 0 is no argument is supplied.

function add (num1 = 0, num2 = 0) {

	// Add the numbers
	// If num1 or num2 is not provided, 0 will be used
	return num1 + num2;

}

// returns 4
add(4);