Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Setting a default variable value to undefined in a function - JavaScript?
The task we are going to perform in this article is setting a default variable value to undefined in a function. Before we jump into the article, let's understand what are functions in JavaScript.
One of the core components of JavaScript are functions. In JavaScript, a function is comparable to a procedure-a collection of statements that carry out an action or compute a value. However, in order for a process to be considered a function, it must accept an input and produce an output with an evident connection between the input and the result.
Let's see how to set a default variable value to undefined in a function.
Using The OR (||) Operator
For a set of operands, the logical OR (||) (logical disjunction) operator is true if and only if one or more of its operands are true. It is frequently applied to Boolean values. When used with non-Boolean values, the || operator will return a non-Boolean value because it actually returns the value of one of the given operands.
Syntax
Following is the syntax for OR (||) operator -
expr1 || expr2
Example
In the following example, we are running the script using the OR operator to set the value to "undefined".
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
<button onclick="getvalue()">Click For Value</button>
<script>
function getvalue(){
let a = undefined;
let b = 22;
a || (a = b);
document.write("The Value of a is: " + a);
}
</script>
</body>
</html>
The Value of a is: 22
When the script gets executed, it will generate an output consisting of a button on the webpage. If the user clicks the button, the event gets triggered and displays the value of a.
Using the Nullish Coalescing Operator (??)
The logical operator known as the nullish coalescing (??) operator returns its right-hand operand when its left-hand operand is null or undefined, and otherwise returns its left-hand operand.
Syntax
Following is the syntax for nullish coalescing(??) -
leftExpr ?? rightExpr
Example
Considering the following example, where we are running the script using the nullish coalescing operator to set the value to "undefined".
<!DOCTYPE html>
<html>
<body>
<script>
let a = "Benz";
let b = undefined;
let c = "Audi";
a ??= c;
b ??= c;
document.write("The value of a: " + a + "<br>");
document.write("The value of b: " + b);
</script>
</body>
</html>
The value of a: Benz The value of b: Audi
On running the above script, the output window will display the values on the webpage. We can observe that when 'a' has a value "Benz", it remains unchanged, while 'b' gets assigned "Audi" because it was undefined.
Example
Execute the below script and observe how we are using the nullish coalescing operator to replace undefined values in an array.
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
<button onclick="undefinedvalue()">Click For Values</button>
<script>
function undefinedvalue(){
let array = ["RX100", 45, undefined, "Vespa", undefined];
array.forEach((item, index) => {
array[index] ??= "TutorialsPoint";
});
document.write(JSON.stringify(array));
}
</script>
</body>
</html>
["RX100",45,"TutorialsPoint","Vespa","TutorialsPoint"]
When the script gets executed, it will generate an output consisting of a click button on the webpage. When the user clicks the button, the event gets triggered and displays an array where all undefined values have been replaced with "TutorialsPoint".
Using Function Parameters with Default Values
Another common approach is to use default parameter values directly in function declarations to handle undefined arguments.
<!DOCTYPE html>
<html>
<body>
<script>
function greetUser(name = "Guest") {
document.write("Hello, " + name + "!<br>");
}
greetUser(); // undefined becomes "Guest"
greetUser("Alice"); // uses provided value
greetUser(undefined); // undefined becomes "Guest"
</script>
</body>
</html>
Hello, Guest! Hello, Alice! Hello, Guest!
Comparison of Methods
| Method | Use Case | Handles null | Handles undefined |
|---|---|---|---|
| OR (||) | Any falsy value | Yes | Yes |
| Nullish coalescing (??) | Only null/undefined | Yes | Yes |
| Default parameters | Function arguments | No | Yes |
Conclusion
The nullish coalescing operator (??) is the most precise for handling undefined values, while the OR operator (||) handles all falsy values. Use default parameters for function arguments to automatically handle undefined inputs.
1K+ Views
