Javascript Default Value if undefined

You can set the default value if it is undefined in javascript using the || (OR) operator, ternary operator, and set default function parameters value.

3 ways to set the default value if undefined

There are several ways to set a default value in JavaScript if a variable is undefined. But these are the common and most used ways:

1. Using the logical OR (||) operator

let myVariable = undefined;
let defaultValue = 'your default value';

// Using logical OR operator
var result = myVariable || defaultValue;
console.log(result); // output: 'your default value'

1. In this above example, we initialized the “myVariable ” to undefined and “defaultValue’ to ‘your default value’.
2. Then create a variable “result” and initialized it to “myVariable || defaultValue”. And logged the variable result.
3. The logical OR operator returns the value of the variable ‘defaultValue’. If ‘myVariable’ has a value, then it is returned instead.

Note that if, ‘myVariable’ is ‘null’, 0, an empty string (‘ ‘), or false, the || OR operator will also return defaultValue, because these values are considered falsy in JavaScript.

2. Using a ternary operator

If you only want to set a default value if the variable is specifically ‘undefined’, you can use the ‘typeof’ operator like this:

let myVariable;
let defaultValue = 'your default value';

let result = (typeof myVariable !== 'undefined') ? myVariable : defaultValue;

console.log(result); // 'your default value'

1. In this above example, we only declare the “myVariable” and initialized the variable “defaultValue’ to ‘your default value’.
2. The ‘typeof‘ operator checks whether ‘myVariable’ is undefined. If it’s not, the ‘?’ operator returns myVariable. Otherwise, the ‘:’ operator returns defaultValue.
3. So, the output returns the value of the variable ‘defaultValue’.

3. Using default function parameters

function myFunction(myVariable = 'your default value') {
  console.log(myVariable);
  }

myFunction(undefined); // 'my default value'
myFunction('my value'); // 'my value'

1. In this above example, we have created a function ‘myFunction’ and it has a parameter called ‘myVariable’.
2. The parameter ‘myVariable’ has the default value ‘your default value’.
3. Inside the function, we logged the variable ‘myVariable’.
4. If you call the function with passing no parameter value for ‘myVariable’ or if it’s explicitly set to ‘undefine’, the default value will be used.
5. If you call the function by passing any string value or integer value, it returns the passed value.

Why do we need to set a default value?

Setting a default value in JavaScript can be useful in situations where you want to ensure that a variable or parameter always has a value, even if it’s not explicitly provided.

If you don’t set a default value and the variable or parameter is, it can cause errors in your code, because you might be trying to use a value that doesn’t exist. Setting a default value can help prevent these errors by providing a fallback value that can be used in place of undefined. For example:

function myFunction(parameter) {
  console.log(parameter);
}

myFunction(); // undefined

In this above example code, we have a function ‘myFunction’ with a parameter, and inside the function we logged the parameter value.  If you call the function without any parameter, then the function returns ‘undefined’ value.

To avoid this, we can set the default value like:

function myFunction(parameter = 'default value') {
  console.log(parameter.toUpperCase()); // 'DEFAULT VALUE'
}

myFunction(); // 'DEFAULT VALUE'

After setting the default value, if you pass any parameter when calling the function the function returns default value.

How does OR operator work?

The entire condition returns true, if either one of the conditions is true. The logical OR operator is represented by two pipe characters ‘||’. We can set one or more conditions. Most of the time we use this operator in “if condition” to check. Let’s see a simple example:

var logIn = 'yes';

if(logIn == 'yes' || logIn == 'no'){
console.log("Welcome"); // Success
}

In this example, we have a variable “isLogged” and initialized to “yes”. I want to print a “welcome” message to both, logged in or not. So we use the ‘OR’ operator. We create an “if statement” and check the 1st condition (logIn == ‘yes’) and the 2nd condition (logIn == ‘no’). Then inside the condition statement, we logged ‘welcome’.

If both conditions are true or only 1st condition is true or only 2nd condition is true, then we get a ‘Welcome’ message.

Conclusion

These are not the only ways to set default values in JavaScript, but they are some of the most common methods.