In this article, you’ll learn how to set default values in javascript. There are various ways to achieve this. Here in this post, we will cover 6 different ways to set the default values in javascript.
Here are the 6 different ways to set the default values in javascript.
In this example, we used the OR(||) operator to set default values in javascript. When we use the OR(||) operator, this operator will check if the first operand is true, then it will return the first operand otherwise it will return the second operand.
false, null, undefined, 0, '', and NaN as falsy values. All other values are truthy values.The OR (||) Operator does not return true or false, rather it returns the first or the second operand, depending upon the case. The second operand will be our default value.
Below is an example to set default values in a variable based on another. If the lastStatus is falsy, then the status variable is set to 'Pending'. Otherwise, it takes the value of the lastStatus variable.
In this example, we set the default value to the variable, if the variable is null.
const lastStatus = null;
const status = lastStatus || 'Pending';
console.log(status); //output ==> "Pending"
In this example, we set the default value to the variable, if the variable is empty string
const lastStatus = '';
const status = lastStatus || 'Pending';
console.log(status); //output ==> "Pending"
In the example, we set the first operand lastStatus is truthy, so the OR(||) operator returns the lastStatus.
const lastStatus = 'InProcess';
const status = lastStatus || 'Pending';
console.log(status); //output ==> "InProcess"
In this example, we used the OR Assignment(||=) operator to set default values in javascript. When we use the OR Assignment(||=) operator, this operator assigns the new values only if the left operand is falsy.
In this example, we set the lastStatus variable to the empty string. The empty string is falsy.
let lastStatus = '';
lastStatus ||= 'Pending';
console.log(lastStatus); //output ==> "Pending"
In this example, we set the lastStatus variable to the null.
let lastStatus = null;
lastStatus ||= 'Pending';
console.log(lastStatus); //output ==> "Pending"
In this example, we set the lastStatus variable to the undefined.
let lastStatus = undefined;
lastStatus ||= 'Pending';
console.log(lastStatus); //output ==> "Pending"
In the example, we set the first operand lastStatus is to ‘InProcess’ which is a truthy value, Using the ||= on a variable holding, such a value has no effect. So the OR Assignment(||=) operator returns the lastStatus.
let lastStatus = 'InProcess';
lastStatus ||= 'Pending';
console.log(lastStatus); //output ==> "InProcess"
In this example, we used the nullish coalescing operator (??). The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. In other words, ?? returns the first argument if it’s not null/undefined. Otherwise, the second one.
Note: This is a recent addition to the language. Old browsers may need polyfills.
In this example, nullish coalescing operator (??)where we assign lastStatus equals to null, because this is the falsy value, so it returns the default value:
let lastStatus = null;
let status = lastStatus ?? 'Pending';
console.log(status); //output ==> "Pending"
Another Example of nullish coalescing operator (??)where we assign lastStatus equals to undefined, because this is the falsy value, so it returns the default value:
let lastStatus = undefined;
let status = lastStatus ?? 'Pending';
console.log(status); //output ==> "Pending"
Let’s take a look at another example, the empty string is a falsy value but not nullish or undefined. The new status variable is set to an empty string in the given example below:
let lastStatus = '';
let status = lastStatus ?? 'Pending';
console.log(status); //output ==> ''
Below is another example where the lastStatus variable stores a string value.
let lastStatus = "InProcess";
let status = lastStatus ?? 'Pending';
console.log(status); //output ==> "InProcess"
The logical nullish assignment (??=) operator assigns the new value only if the current value is null or undefined.
Let’s take a look at an example, undefined is a nullish value, so in the next example, the status variable is set to the default value.
let lastStatus = undefined;
lastStatus ??= 'Pending';
console.log(lastStatus); //output ==> "Pending"
Below is another example, where we used the empty string which is not nullish. Doing the logical nullish assignment has no effect. In the example below, the status variable remains set to an empty string.
let lastStatus = '';
lastStatus ??= 'Pending';
console.log(lastStatus); //output ==> ""
Below is another example where the lastStatus variable stores a string value.
let lastStatus = 'InProcess';
lastStatus ??= 'Pending';
console.log(lastStatus); //output ==> "InProcess"
In this example, we set the default function parameters to allow named parameters to be initialized with default values if no value or undefined is passed.
Let’s take a look at an example of a function accepting defaults.
function getStatus(status = 'Pending'){
return status;
}
Here we call the function with no arguments or using undefined as an argument makes the function use the default value.
console.log(getLastStatus()); //output ==> "Pending"
console.log(getLastStatus(undefined)); //output ==> "Pending"
As you know, null and undefined are different values. When we call a function with null as an argument, then the function does not use it as the default value.
console.log(getLastStatus(null)); //output ==> nullThe same thing happens in the following example, where the default is not applied.
console.log(getLastStatus(0)); //output ==> 0
console.log(getLastStatus('')); //output ==> ''
console.log(getLastStatus('InProcess')); //output ==> "InProcess"
In this example, we used the destructuring Assignment to set the default values. The destructuring assignment is a new syntax to get a part of an array or of an object and assign it to a variable in a more convenient way. It is also possible to set default values when using the destructuring assignments.
Default values in destructuring assignment work if the property does not exist or if its value is set to undefined.
Let’s take a look at another example. The name property is missing from the assigned object. In this case, the name variable gets the default.
const lastStatus = {};
const { name = 'Pending' } = lastStatus;
console.log(name); //Output ==> "Pending"
Here is another example: When the specified property has a value that is not undefined, like the empty string, then the default is not applied.
const lastStatus = { name: '' };
const { name = 'Pending' } = lastStatus;
console.log(name); //Output ==> ""
Below is another example, where the name property has a string value. The default is not used.
const lastStatus = { name: 'InProcess' };
const { name = 'Pending' } = lastStatus;
console.log(name); //Output ==> "InProcess"
Here is another example, where we combine defaults on the destructuring assignment with defaults on function parameters. Here is how we can ensure that the name property has a default value when the input object parameter is missing or the name property is missing or undefined.
function getLastStatus({ name = 'Pending' } = {}){
return name;
}
console.log(getLastStatus()); //output ==> 'Pending'
console.log(getLastStatus({})); //output ==> 'Pending'
console.log(getLastStatus({name: 'InProcess'})); //output ==> 'InProcess'
I hope this article will help you to understand how to set default values in javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments