How to Toggle a Boolean in JavaScript (TLDR; bool = !bool)

By /

To toggle a boolean value in JavaScript, use the not operator (!).

bool = !bool

This operator negates the boolean value, so if the value is true, it will become false, and if the value is false, it will become true.

Here’s an example of how to toggle a boolean:

let toggle = false;

// Toggle the boolean value
toggle = !toggle;

console.log(toggle);

Output:

True

What Is the Not (!) Operator in JavaScript?

In case you’re new to JavaScript and programming, you might not know what the not operator (!) does.

In short, the not operator (!) is a logical operator that negates a boolean value. Another way to put it is that the not operator converts a boolean value to its opposite value.

  • If the value is true, the not operator will convert it to false.
  • If the value is false, it will convert it to true.

Here’s an example of how to use the not operator:

let isTrue = true;

// Negate the boolean value
let isFalse = !isTrue;

console.log(isTrue); // Output: true
console.log(isFalse); // Output: false

The not operator is a unary operator, meaning that it only operates on a single operand. This makes it easy to use as you can just place it before the operand that it negates.

In addition to negating boolean values, the not operator can also be used to convert non-boolean values to boolean values.

For example, if you use the not operator on a number, it will convert the number to a boolean value based on whether the number is equal to zero. If the number is zero, it will convert it to false, and if the number is non-zero, it will convert it to true.

let num = 0;

// Convert the number to a boolean value
let bool = !num;

console.log(bool);

Output:

true

Alternative Ways to Toggle in JavaScript

Using the not operator (!) is the more straightforward way to toggle a boolean value in JavaScript. It is a single operator that negates the boolean value, and it is easy to read and understand.

But there’s an alternative you might want to learn for the future as well.

In JavaScript, the ternary operator (? :) can also be used to toggle a boolean value. However, in this particular use case, it’s more verbose and complex.

Here’s the generic syntax of the ternary operator in JavaScript

condition ? true_expression : false_expression

And here’s how you can use it to toggle a boolean:

let bool = false

const toggle = () => bool = bool ? false : true

toggle()
console.log(bool)
toggle()
console.log(bool)
toggle()
console.log(bool)

Output:

true
false
true

Make sure to read more about these one-liner if-else statements in JavaScript here.

Example: Toggle JS Boolean (HTML)

Here’s an example of an HTML button that toggles a boolean value and displays the value of the boolean in the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Boolean Toggle</title>
</head>
<body>
  <button id="toggleButton">Toggle</button>
  <p id="booleanValue">false</p>
  <script>
    const toggleButton = document.getElementById('toggleButton');
    const booleanValue = document.getElementById('booleanValue');

    let toggle = false;

    toggleButton.addEventListener('click', () => {
      toggle = !toggle;
      booleanValue.textContent = toggle.toString();
    });
  </script>
</body>
</html>

In this example, we have an HTML button with the ID toggleButton and a paragraph element with the ID booleanValue.

We use JavaScript to get references to these elements and add a click event listener to the button.

When the button is clicked, the event listener function is called, which toggles the boolean value and updates the text content of the paragraph element to show the current value of the boolean.

Here’s what the page looks like. By clicking the button you can toggle the boolean and the change is visible in the HTML document too.

Toggle off in javascript

When you load this HTML in a web browser and click the button, it will toggle the boolean value and update the text in the paragraph element to show the current value of the boolean.

Scroll to Top