Skip to main content

How to Toggle a Boolean in JavaScript

Toggling a boolean value—that is, flipping it from true to false or false to true—is one of the most common and fundamental operations in programming. It's the basis for managing UI states like opening/closing a modal, marking a task as complete, or switching a theme from light to dark.

This guide will demonstrate the single, standard, and most idiomatic way to toggle a boolean in JavaScript using the logical NOT (!) operator, and will show how this simple technique is applied in practical, real-world examples.

The Core Method (Recommended): The Logical NOT (!) Operator​

The simplest and most direct way to toggle a boolean is to reassign the variable to its own negated value using the logical NOT (!) operator.

For example, you have a boolean variable, and you need to flip its value.

// Problem: If `isActive` is true, make it false. If it's false, make it true.
let isActive = false;

Solution: this single, clean line of code is all you need.

let isActive = false;
console.log(isActive); // Output: false

// Toggle the boolean
isActive = !isActive;
console.log(isActive); // Output: true

// Toggle it again
isActive = !isActive;
console.log(isActive); // Output: false
note

Because we are reassigning the variable, it must be declared with let or var, not const.

How the ! Operator Works​

The logical NOT (!) operator is a unary operator that takes a single value and returns its negated boolean equivalent.

  • If the operand is "truthy," it returns false.
  • If the operand is "falsy," it returns true.
console.log(!true);     // Output: false
console.log(!false);    // Output: true

// The operator also coerces non-boolean values
console.log(!'hello');  // Output: false (non-empty string is truthy)
console.log(!0);        // Output: true (0 is falsy)
note

When used in an assignment like isActive = !isActive;, it evaluates the current value of isActive, flips it, and assigns the new, flipped value back to the same variable.

Practical Examples​

How to Toggle a UI State​

This is a classic use case. A button that opens and closes a menu can be controlled by toggling a boolean flag.

const toggleButton = document.getElementById('menu-btn');
const menu = document.getElementById('main-menu');

let isMenuOpen = false; // Initial state

toggleButton.addEventListener('click', () => {
  // Toggle the boolean state on every click
  isMenuOpen = !isMenuOpen;
  
  // Use the new state to update the UI
  if (isMenuOpen) {
    menu.classList.add('open');
    toggleButton.textContent = 'Close Menu';
  } else {
    menu.classList.remove('open');
    toggleButton.textContent = 'Open Menu';
  }
});

How to Toggle a Boolean in a React State Hook​

This pattern is extremely common in React for managing component state. The state setter function can accept a callback that receives the previous state, which is the perfect place for a toggle.

import { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(false);

  // Function to handle the toggle
  const handleToggle = () => {
    // The setter's callback receives the previous state value.
    // We return the toggled value to set the new state.
    setIsVisible(prevIsVisible => !prevIsVisible);
  };

  return (
    <div>
      <button onClick={handleToggle}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
      {isVisible && <p>Now you see me!</p>}
    </div>
  );
}

Alternatives to Avoid​

While you can technically toggle a boolean with other, more verbose methods, they are not idiomatic and should be avoided.

The if/else Method (Too Verbose)​

This is unnecessarily long!

// AVOID: This is unnecessarily long.
if (bool === true) {
  bool = false;
} else {
  bool = true;
}

The Ternary Operator Method (Also Verbose)​

This is also much longer than the ! operator.

// AVOID: This is also much longer than the ! operator.
bool = bool === true ? false : true;
note

The simple bool = !bool; is universally understood by JavaScript developers and is the clear best practice.

Conclusion​

Toggling a boolean is a fundamental operation with a single, clear solution in JavaScript.

  • Always use the logical NOT (!) operator for toggling: myBoolean = !myBoolean;.
  • This pattern is efficient, highly readable, and is the idiomatic standard for this task.
  • Avoid more verbose alternatives like if/else or ternary operators, as they add unnecessary complexity.

Table of Contents