Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to toggle a boolean using JavaScript?
In this tutorial, we will learn how to toggle a boolean value in javascript. In addition to this, we will also learn how we can use it for various web application features that require toggling a certain piece of state or value.
Toggling a boolean in JavaScript entails altering its value from true to false or vice versa. Toggling booleans can be helpful in a variety of situations, such as changing a boolean value to initiate an action or to toggle between states or the visibility of an element.
Toggling can be implemented using different methods like the NOT operator, ternary operator, or the XOR operator.
Let’s look at some of the examples to understand the concept better −
Example 1: Using the NOT (!) Operator
One of the ways to toggle a boolean value is by using the NOT operator (!). The NOT operator negates the boolean value, changing true to false or false to true. In this example, we will toggle the flag value using the NOT operator at the click of a button.
Filename - index.html
<html>
<head>
<title>How to toggle a boolean using JavaScript?</title>
<script>
function toggleBoolean() {
let flag = true;
console.log(flag);
flag = !flag; // Toggling the boolean
console.log(flag);
}
</script>
</head>
<body>
<h3>Toggle Boolean using NOT Operator</h3>
<button onclick="toggleBoolean()">Toggle Boolean</button>
</body>
</html>
Output
The result will like the image below.
Example 2: Using the Ternary Operator
The ternary operator (?:) is another method for switching a boolean. To check the value of flag in this example, we will use the ternary operator. If true, we set the flag to false; if false, we set the flag to true.
Filename - index.html
<html>
<head>
<title>How to toggle a boolean using JavaScript?</title>
<script>
function toggleBoolean() {
let flag = true;
console.log(flag);
flag = flag ? false : true; // Toggling the boolean
console.log(flag);
}
</script>
</head>
<body>
<h3>Toggle Boolean using ternary Operator</h3>
<button onclick="toggleBoolean()">Toggle Boolean</button>
</body>
</html>
Output
The result will like the image below.
Example 3: Using the XOR (^) operator
The XOR (exclusive OR) operator is another technique to toggle a boolean. If the operands have different boolean values, the XOR operator returns true; otherwise, it returns false. We can change the state of a boolean variable with a fixed true value by using the XOR operator on it.
Filename - index.html
<html>
<head>
<title>How to toggle a boolean using JavaScript?</title>
<script>
function toggleBoolean() {
let flag = true;
console.log(flag);
flag = flag ^ true; // Toggling the boolean
console.log(flag ? true : false);
}
</script>
</head>
<body>
<h3>Toggle Boolean using XOR Operator</h3>
<button onclick="toggleBoolean()">Toggle Boolean</button>
</body>
</html>
Output
The result will like the image below.
Conclusion
Boolean switching refers to converting a variable's value from true to false or from false to true. It enables dynamic switching between distinct states and is applicable to many web application features that ask for toggling a certain state. We learned the toggling a boolean value in javascript and saw some examples explaining the same.
3K+ Views
