In JavaScript if a variable is not initialised with any value, then it is set to undefined. We can set a default value if a value is undefined. This can be done using two ways.
Example 1: By using if checks (Brute force). In this method, we will manually check whether a value is not null or not undefined, if so then set it to some default value.
-
Example:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title>Demo</title></head><body><h1 style="color: green;text-align: center;">GeeksforGeeks</h1><h3 style="text-align: center;">Replace a valueifnullor undefined</h3><div style="margin-top: 50px;text-align: center;"><input type="text"id="anyId"><button type="submit"onclick="defaultValue_ifcheck()">Submit</button></div><script>// By using if-checkfunctiondefaultValue_ifcheck() {varoldValue = document.getElementById("anyId").value;varnewValue;if(!oldValue) {newValue ="This is default value: Geeksforgeeks";}else{newValue = oldValue;}alert(newValue);}</script></body></html> -
Output:
Example 2: By using logical OR (||) operator. In this method, if the value is null or undefined, then it will simply replaced by default value set by user.
-
Example:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title>Replace a valueifnullor undefined</title></head><body><h1 style="color: green;text-align: center;">GeeksforGeeks</h1><h3 style="text-align: center;">Replace a valueifnullor undefined</h3><div style="margin-top: 50px;text-align: center;"><input type="text"id="anyId"><button type="submit"onclick="defaultValue_or()">Submit</button></div></body><script>// By using Logical OR (||)functiondefaultValue_or() {varoldValue = document.getElementById("anyId").value;varnewValue = oldValue ||"This is default value: Geeksforgeeks";alert(newValue);}</script></html> -
Output:
Note: In Method 2, don’t use the following newValue = 10 || oldValue;. It will always set newValue to 10 because 10 will always return true.