How to convert Boolean to Number in JavaScript?

In this tutorial, we will convert Boolean to Number in JavaScript. The Boolean is the variable's data type, which is supported by JavaScript like the other programming languages.

The Boolean data type contains only two values, true and false. In some cases, programmers must convert the true or false value to the number. For example, using the strict equality operator to compare the Boolean value with the number variable.

Here, using different operators, we have three methods to convert the Boolean to a number.

Using the Number() Function

In JavaScript, the Number() function is useful to convert any variable to a number. We can also use it to convert the Boolean variables to numbers.

Syntax

Users can follow the syntax below to convert the Boolean to a number.

let bool = true;
let result = Number(bool);

Parameters

bool − It is a Boolean variable which we need to convert to the number.

Example

In the below example, we have converted the true and false both Boolean values to the number using the Number()function of JavaScript number library. The Number()function returns 1 for the true value and 0 for the false value.


<html>
<head>
</head>
<body>
   <h2>Convert the Boolean to number in JavaScript.</h2>
   <h4>Convert the Boolean ( true / false ) respectively to number using <i> Number() </i> function.</h4>
   <div id="number1"></div>
   <div id = "number2"></div>
</body>
<script>
   var number1 = document.getElementById("number1");
   var number2 = document.getElementById("number2");
   let bool = true;
   let result = Number(bool);
   number1.innerHTML = result;
   number2.innerHTML = Number(false);
</script>
</html>

Using the Bitwise Operators

In this section, we will learn to convert the Boolean to a Number using the Bitwise OR and Bitwise AND operators. When we perform the Bitwise OR operation of Boolean value with 0, it returns the number value.

Furthermore, when the user performs the Bitwise AND operation of 1 with any Boolean values, it returns a respected number value.

Syntax

Users can follow the syntax below to convert the Boolean to a number using Bitwise operators.

let bool = true;
let result = bool | 0; // using the Bitwise OR operator
let result = bool & 1; // using the Bitwise AND operator

Example

In the example below, we have taken two different examples of converting Boolean tonumber, one is using the Bitwise | operator and another is using the Bitwise & operator.


<html>
<head>
</head>
<body>
   <h2>Convert the Boolean to number in JavaScript.</h2>
   <h4>Converting the Boolean true to number using <i> Bitwise | </i> operator.</h4>
   <div id = "number1"></div>
   <h4>Converting the Boolean false to number using <i> Bitwise &</i> operator.</h4>
   <div id = "number2"></div>
</body>
<script>
   var number1 = document.getElementById("number1");
   var number2 = document.getElementById("number2");
   let bool = true;
   let result = bool | 0;
   number1.innerHTML = result;
   bool = false;
   number2.innerHTML = bool & 1;
</script>
</html>

Using the Arithmetic Operators

This is the last approach of this tutorial to convert the Boolean to a number. We will use the addition and multiplication, arithmetic operator. However, we can also use the subtraction and division operators.

When we add or subtract the 0 from the Boolean value, it returns the number value respected to the Boolean value. And the same way, when we multiply the Boolean value by 1, it returns the same result as the addition.

Syntax

Follow the syntax below to use multiplication and addition operators.

let bool = true;
let result = bool + 0; // using the Arithmetic + operator
let result = bool * 1; // using the Arithmetic * operator

Example

In the example below, we have used the addition and multiplication operators to convert the Boolean to a number.


<html>
<head>
</head>
<body>
   <h2>Convert the Boolean to number in JavaScript.</h2>
   <h4>Convert the Boolean false to number using <i> Arithmetic + </i> operator.</h4>
   <div id = "number1"></div>
   <h4>Convert the Boolean true to number using <i> Arithmetic * </i> operator.</h4>
   <div id = "number2"></div>
</body>
<script>
   var number1 = document.getElementById("number1");
   var number2 = document.getElementById("number2");
   let bool = false;
   let result = bool + 0;
   number1.innerHTML = result;
   bool = true;
   number2.innerHTML = bool * 1;
</script>
</html>

Users can use any of three methods to convert Boolean to Integer. The first method calls the built-in library function, which is slower than the second and third approaches. In any programming language, Bitwise operation is the fastest operation. So, the second method is the fastest approach, and users can use it easily.