A JavaScript Boolean represents one of two values: true or false.
Boolean Values
Very often, in programming, you will need a data type that can only have one of two values, like
- YES / NO
- ON / OFF
- TRUE / FALSE
For this, JavaScript has a Boolean data type. It can only take the values true or false.
The Boolean() Function
You can use the Boolean() function to find out if an expression (or a variable) is true:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the value of Boolean(10 > 9):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Boolean(10 > 9);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the value of Boolean(10 > 9):
true
Or even easier:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the value of 10 > 9:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10 > 9;
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the value of 10 > 9:
true
Comparisons and Conditions
The chapter JS Comparisons gives a full overview of comparison operators.
The chapter JS Conditions gives a full overview of conditional statements.
Here are some examples:
| Operator | Description | Example |
|---|---|---|
| == | equal to | if (day == “Monday”) |
| > | greater than | if (salary > 9000) |
| < | less than | if (age < 18) |
The Boolean value of an expression is the basis for all JavaScript comparisons and conditions.
Everything With a “Value” is True
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"100 is " + Boolean(100) + "<br>" +
"3.14 is " + Boolean(3.14) + "<br>" +
"-15 is " + Boolean(-15) + "<br>" +
"Any (not empty) string is " + Boolean("Hello") + "<br>" +
"Even the string 'false' is " + Boolean('false') + "<br>" +
"Any expression (except zero) is " + Boolean(1 + 7 + 3.14);
</script>
</body>
</html>
Result:
JavaScript Booleans
100 is true
3.14 is true
-15 is true
Any (not empty) string is true
Even the string ‘false’ is true
Any expression (except zero) is true
Everything Without a “Value” is False
The Boolean value of 0 (zero) is false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of 0:</p>
<p id="demo"></p>
<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of 0:
false
The Boolean value of -0 (minus zero) is false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of -0:</p>
<p id="demo"></p>
<script>
let x = -0;
document.getElementById("demo").innerHTML = Boolean(x);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of -0:
false
The Boolean value of “” (empty string) is false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of "":</p>
<p id="demo"></p>
<script>
let x = "";
document.getElementById("demo").innerHTML = Boolean("");
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of “”:
false
The Boolean value of undefined is false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of undefined:</p>
<p id="demo"></p>
<script>
let x;
document.getElementById("demo").innerHTML = Boolean(x);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of undefined:
false
The Boolean value of null is false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of null:</p>
<p id="demo"></p>
<script>
let x = null;
document.getElementById("demo").innerHTML = Boolean(x);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of null:
false
The Boolean value of false is (you guessed it) false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of false:</p>
<p id="demo"></p>
<script>
let x = false;
document.getElementById("demo").innerHTML = Boolean(x);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of false:
false
The Boolean value of NaN is false:
Examples:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Display the Boolean value of NaN:</p>
<p id="demo"></p>
<script>
let x = 10 / "Hello";
document.getElementById("demo").innerHTML = Boolean(x);
</script>
</body>
</html>
Result:
JavaScript Booleans
Display the Boolean value of NaN:
false
JavaScript Booleans as Objects
Normally JavaScript booleans are primitive values created from literals:
let x = false;
But booleans can also be defined as objects with the keyword new:
let y = new Boolean(false);
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans and Boolean objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
// x is a boolean
let x = false;
// y is an object
let y = new Boolean(false);
document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;
</script>
</body>
</html>
Result:
JavaScript Booleans
Booleans and Boolean objects cannot be safely compared:
boolean
object
Do not create Boolean objects.
The new keyword complicates the code and slows down execution speed.
Boolean objects can produce unexpected results:
When using the == operator, x and y are equal:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans and Boolean objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
let x = false; // x is a boolean
let y = new Boolean(false); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Result:
JavaScript Booleans
Booleans and Boolean objects cannot be safely compared:
true
When using the === operator, x and y are not equal:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans and Boolean objects cannot be safely compared:</p>
<p id="demo"></p>
<script>
let x = false; // x is a Boolean
let y = new Boolean(false); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Result:
JavaScript Booleans
Booleans and Boolean objects cannot be safely compared:
false
Note the difference between (x==y) and (x===y).
(x == y) true of false?
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans and Boolean objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
const x = new Boolean(false);
const y = new Boolean(false);
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Result:
JavaScript Booleans
Booleans and Boolean objects cannot be safely compared.
false
(x === y) true of false?
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans and Boolean objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
const x = new Boolean(false);
const y = new Boolean(false);
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Result:
JavaScript Booleans
Booleans and Boolean objects cannot be safely compared.
false