HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

JavaScript Booleans

❮ Previous Next ❯

A JavaScript Boolean is like a switch that can be either on or off. It can only have two values: true or false.

Boolean Values

Frequently in programming, you'll require a data type that can only hold one of two values, such as:

YES / NO
ON / OFF
TRUE / FALSE

To deal with this, JavaScript uses a special data type called Boolean. It can only have two possible values, which are true or false.

The Boolean() Function

You can use the Boolean() function to determine if an expression (or a variable) is true.

Or even easier:

Comparisons and Conditions

The chapter JS Comparisons gives a full overview of comparison operators.

The section on JavaScript Conditions provides a comprehensive explanation of how conditional statements work.

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

Everything Without a Value is False

JavaScript Booleans as Objects

let x = false;

However, you can also create booleans as objects using the keyword new:

let y = new Boolean(false);

Do not create Boolean objects.

The new word makes the code harder and slower to run.

Boolean objects can produce unexpected results:

Note the difference between (x==y) and (x===y).

Comparing two JavaScript objects always return false.

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p>Display the value of Boolean(10 > 9):</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = Boolean(10 > 9);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p>Display the value of 10 > 9:</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 10 > 9;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p>Display the Boolean value of "":</p>
    <p id="demo"></p>
    <script>
      let x = "";
      document.getElementById("demo").innerHTML = Boolean("");
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p>Display the Boolean value of undefined:</p>
    <p id="demo"></p>
    <script>
      let x;
      document.getElementById("demo").innerHTML = Boolean(x);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p>Comparing Booleans and Boolean objects can be risky:</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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <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>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p id="demo"></p>
    <script>
      const x = new Boolean(false);
      const y = new Boolean(false);
      document.getElementById("demo").innerHTML = (x == y);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Booleans</h1>
    <p id="demo"></p>
    <script>
      const x = new Boolean(false);
      const y = new Boolean(false);
      document.getElementById("demo").innerHTML = (x === y);
    </script>
  </body>
</html>

❮ Previous Next ❯

Web Development