Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Using the NOT (!) Operator (Recommended)
The most common and efficient way 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.
<html>
<head>
<title>Toggle Boolean using NOT Operator</title>
</head>
<body>
<h3>Toggle Boolean using NOT Operator</h3>
<button onclick="toggleBoolean()">Toggle Boolean</button>
<p id="result"></p>
<script>
let flag = true;
document.getElementById('result').textContent = 'Current value: ' + flag;
function toggleBoolean() {
console.log('Before toggle:', flag);
flag = !flag; // Toggling the boolean
console.log('After toggle:', flag);
document.getElementById('result').textContent = 'Current value: ' + flag;
}
</script>
</body>
</html>
Before toggle: true After toggle: false
Using the Ternary Operator
The ternary operator (?:) provides another method for toggling a boolean. This approach explicitly checks the current value and assigns the opposite value.
<html>
<head>
<title>Toggle Boolean using Ternary Operator</title>
</head>
<body>
<h3>Toggle Boolean using Ternary Operator</h3>
<button onclick="toggleBoolean()">Toggle Boolean</button>
<p id="result"></p>
<script>
let flag = true;
document.getElementById('result').textContent = 'Current value: ' + flag;
function toggleBoolean() {
console.log('Before toggle:', flag);
flag = flag ? false : true; // Toggling the boolean
console.log('After toggle:', flag);
document.getElementById('result').textContent = 'Current value: ' + flag;
}
</script>
</body>
</html>
Before toggle: true After toggle: false
Using the XOR (^) Operator
The XOR (exclusive OR) operator provides a bitwise approach to toggling. When you XOR a boolean with true, it toggles the value. Note that this method returns a number (0 or 1) that needs to be converted back to boolean.
<html>
<head>
<title>Toggle Boolean using XOR Operator</title>
</head>
<body>
<h3>Toggle Boolean using XOR Operator</h3>
<button onclick="toggleBoolean()">Toggle Boolean</button>
<p id="result"></p>
<script>
let flag = true;
document.getElementById('result').textContent = 'Current value: ' + flag;
function toggleBoolean() {
console.log('Before toggle:', flag);
flag = !!(flag ^ true); // Toggling and converting back to boolean
console.log('After toggle:', flag);
document.getElementById('result').textContent = 'Current value: ' + flag;
}
</script>
</body>
</html>
Before toggle: true After toggle: false
Comparison of Methods
| Method | Syntax | Performance | Readability |
|---|---|---|---|
| NOT Operator | flag = !flag |
Best | Excellent |
| Ternary Operator | flag = flag ? false : true |
Good | Good |
| XOR Operator | flag = !!(flag ^ true) |
Good | Poor |
Common Use Cases
Boolean toggling is commonly used for:
- Show/hide elements on a webpage
- Enable/disable form controls
- Toggle between light and dark themes
- Control game states (pause/play)
- Switch between different modes in applications
Conclusion
The NOT operator (!) is the most efficient and readable way to toggle boolean values in JavaScript. While ternary and XOR operators work, they're less commonly used for simple boolean toggling due to verbosity or complexity.
6K+ Views
