How to toggle a boolean using JavaScript ?

Last Updated : 16 Jan, 2024

A boolean value can be toggled in JavaScript by using two approaches which are discussed below:

Table of Content

Using the logical NOT operator
Using the ternary operator
Using the XOR (^) operator

Method 1: Using the logical NOT operator

The logical NOT operator in Boolean algebra is used to negate an expression or value. Using this operator on a true value would return false and using it on a false value would return true. This property can be used to toggle a boolean value. The NOT operator is used before the variable is toggled and the result is assigned to the same variable. This will effectively toggle the boolean value.

Syntax:

booleanValue = !booleanValue

Example: We are using the logical NOT operator

html

<html>
<head>
    <title>
        How to toggle a boolean
        using JavaScript?
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to toggle a boolean
        using JavaScript?
    </b>

    <p>
        The boolean is toggled whenever
        the button is pressed.
    </p>

    <p>
        See the console for
        the output
    </p>

    <button onclick="toggle()">
        Toggle Bool
    </button>

    <p id="toggled">

    </p>

    <script>
        let testBool = true;

        function toggle() {
            testBool = !testBool;

            let text = document.getElementById('toggled')
            text.innerHTML = testBool
        }
    </script>
</body>

</html>

Output:

xorrr

Method 2: Using the ternary operator

The ternary operator is used as a shortcut to using the if/else statement. It is used to make a decision based on the condition of expression. It takes three parameters, the condition statement, the expression to be executed if the condition is satisfied and the expression to be executed if the condition is not satisfied. The boolean value to be toggled is passed as the condition. The expression to be executed if true is given as 'false' and expression to be executed if false is given as 'true'. The result of this operator is assigned back to the boolean value to be toggled. This will effectively toggle the value as a true condition will return false, and a false condition would return true.

Syntax:

booleanValue = booleanValue? false : true

Example: We are using the ternary operator

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to toggle a boolean
        using JavaScript?
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to toggle a boolean
        using JavaScript?
    </b>

    <p>
        The boolean is toggled
        whenever the button is
        pressed.
    </p>


    <button onclick="toggle()">
        Toggle Bool
    </button>

    <p id="toggled">

    </p>

    <script>
        let testBool = true;
        console.log('Default value of bool is',
            testBool);

        function toggle() {
            testBool = testBool ? false : true;

            let text = document.getElementById('toggled')
            text.innerHTML = testBool
        } 
    </script>
</body>

</html>

Output:

xorrr

Method 3: Using the XOR (^) operator

In this method, If the operands have different boolean values, the XOR operator returns true; otherwise, it returns false.

Example: We are using XOR (^) operator.

HTML

<html>

<head>
    <title>
        How to toggle a boolean
        using XOR in JavaScript?
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to toggle a boolean
        using XOR in JavaScript?
    </b>

    <p>
        The boolean is toggled whenever
        the button is pressed.
    </p>

    <p>
        See the console for
        the output
    </p>

    <button onclick="toggle()">
        Toggle Bool
    </button>

    <p id="toggled">

    </p>

    <script>
        let testBool = true;

        console.log('Default value of bool is', testBool);

        function toggle() {
            testBool = testBool ^ true;

            let text = document.getElementById('toggled')
            text.innerHTML = testBool ? "true" : "false"
            // console.log('Toggled bool is', testBool);
        }
    </script>
</body>

</html>