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
How null is converted to Number in JavaScript?
In JavaScript, null is a primitive value that represents the intentional absence of any object value. When null is converted to a number, it becomes 0. This article explores various methods to convert null to a number in JavaScript.
- Using Number() Method
- Using Logical OR (||)
- Using the ~~ operator
- Using Ternary Operator
- Using arithmetic operations
Using the Number() Method
The Number() method is the most straightforward way to convert null to a number. It explicitly converts null to 0.
Syntax
Number(null)
Example
<html>
<head>
<title>Example: Convert null to Number</title>
</head>
<body>
<p>Convert null to Number using the Number() Method</p>
<p id="output"></p>
<script>
let num = Number(null);
document.getElementById("output").innerHTML += num + "<br>";
document.getElementById("output").innerHTML += typeof num;
</script>
</body>
</html>
0 number
Using Logical OR (||)
The logical OR operator (||) returns the first truthy value or the last value if all are falsy. Since null is falsy, null || 0 returns 0.
Syntax
null || number;
Example
<html>
<head>
<title>Example: Convert null to Number</title>
</head>
<body>
<p>Convert null to Number using the Logical OR (||)</p>
<p id="output"></p>
<script>
let num = null || 0;
document.getElementById("output").innerHTML += num + "<br>";
document.getElementById("output").innerHTML += typeof num;
</script>
</body>
</html>
0 number
Using the ~~ Operator
The double tilde (~~) operator performs a double bitwise NOT operation, which converts null to 0. This is a fast but less readable method.
Syntax
~~value
Example
<html>
<head>
<title>Example: Convert null to Number</title>
</head>
<body>
<p>Convert null to Number using the ~~ Operator</p>
<p id="output"></p>
<script>
let num = ~~null;
document.getElementById("output").innerHTML += num + "<br>";
document.getElementById("output").innerHTML += typeof num;
</script>
</body>
</html>
0 number
Using the Ternary Operator
The ternary operator checks if a value is truthy or falsy and returns different values accordingly. Since null is falsy, it returns the alternative value.
Syntax
null ? null : number
Example
<html>
<head>
<title>Example: Convert null to Number</title>
</head>
<body>
<p>Convert null to Number using the Ternary Operator</p>
<p id="output"></p>
<script>
let num = null ? null : 0;
document.getElementById("output").innerHTML += num + "<br>";
document.getElementById("output").innerHTML += typeof num;
</script>
</body>
</html>
0 number
Using Arithmetic Operations
Arithmetic operations automatically convert null to 0. Adding null to any number or boolean will convert null to 0 first.
Syntax
null + 0 null + false
Example
<html>
<head>
<title>Example: Convert null to Number</title>
</head>
<body>
<p>Convert null to Number using arithmetic operations</p>
<p id="output"></p>
<script>
let num1 = null + 0;
let num2 = null + false;
document.getElementById("output").innerHTML += "null + 0 = " + num1 + " (type: " + typeof num1 + ")<br>";
document.getElementById("output").innerHTML += "null + false = " + num2 + " (type: " + typeof num2 + ")";
</script>
</body>
</html>
null + 0 = 0 (type: number) null + false = 0 (type: number)
Comparison
| Method | Readability | Performance | Result |
|---|---|---|---|
Number(null) |
High | Good | 0 |
null || 0 |
High | Good | 0 |
~~null |
Low | Fast | 0 |
null ? null : 0 |
Medium | Good | 0 |
null + 0 |
Medium | Good | 0 |
Conclusion
All methods convert null to 0 effectively. Use Number(null) for clarity, ~~null for performance, or logical operators for conditional scenarios. Choose based on your code's readability and performance requirements.
10K+ Views
