How to toggle a boolean using JavaScript ?

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

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 to be toggled and the result is assigned to the same variable. This will effectively toggle the boolean value.

Syntax:

booleanValue = !booleanValue

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>
      
    <script>
        let testBool = true;
          
        console.log('Default value of bool is',
                                   testBool);
      
        function toggle() {
            testBool = !testBool;
              
            console.log('Toggled bool is',
                                testBool);
        }
    </script>
</body>
  
</html>

chevron_right






                        filter_none








Output:




    

  • Clicking the button once:
    
pressed-once

    • 

  • Clicking the button twice:
    
pressed-twice

    • 



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:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 


      


    <p> 


        See the console 


        for the output 


    </p> 


  


    <button onclick="toggle()"> 


        Toggle Bool 


    </button> 


      


    <script> 


        let testBool = true; 


        console.log('Default value of bool is', 


                    testBool); 


      


        function toggle() { 


            testBool = testBool ? false : true; 


              


            console.log('Toggled bool is', 


                                testBool); 


        } 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • Clicking the button once:
    
pressed-once-2

    • 

  • Clicking the button twice:
    
pressed-twice-2

    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
sayantanm19
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.