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;">       Âneveropen   Â</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-check       ÂfunctiondefaultValue_ifcheck() {           ÂvaroldValue = document.getElementById("anyId").value;           ÂvarnewValue;           Âif(!oldValue) {               ÂnewValue =               Â"This is default value: Geeksforneveropen";           Â}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;">       Âneveropen   Â</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: Geeksforneveropen";       Â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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
