How to Toggle a Boolean in JavaScript

avatar
Borislav Hadzhiev

Last updated: Jan 8, 2023
3 min

banner

# Toggle a Boolean in JavaScript

Use the logical NOT (!) operator to toggle a boolean in JavaScript, e.g. bool = !bool.

When used with a boolean value, the logical NOT (!) operator will toggle the value of the boolean and return the result.

index.js
let bool = true; bool = !bool; console.log(bool); // ๐Ÿ‘‰๏ธ false

toggle boolean in javascript

We used the logical NOT (!) operator to toggle a boolean value.

When used with a value of true, the operator returns false and vice versa.

index.js
console.log(!true); // false console.log(!false); // true

Here are some more examples of using the logical NOT (!) operator.

index.js
console.log(!'my str'); // ๐Ÿ‘‰๏ธ false console.log(!''); // ๐Ÿ‘‰๏ธ true console.log(!null); // ๐Ÿ‘‰๏ธ true console.log(!undefined); // ๐Ÿ‘‰๏ธ true

The logical NOT (!) operator:

  1. Converts the value to a boolean (if it isn't one already)
  2. Flips the boolean and returns the result
Notice that we used the let keyword to declare the bool variable.
index.js
let bool = true; bool = !bool; console.log(bool); // ๐Ÿ‘‰๏ธ false

Variables declared using const cannot be reassigned.

An alternative approach is to use the strict inequality (!==) operator.

# Toggle a Boolean using strict inequality (!==) operator

To toggle a boolean:

  1. Use the strict inequality (!==) operator to compare the boolean to true.
  2. The comparison will return false if the boolean is equal to true and vice versa.
index.js
let bool = true; bool = bool !== true; console.log(bool); // ๐Ÿ‘‰๏ธ false bool = bool !== true; console.log(bool); // ๐Ÿ‘‰๏ธ true

toggle boolean using strict inequality

The first comparison checks if a value of true is not equal to true.

The comparison evaluates to false, effectively toggling the boolean.

The second comparison checks if false is not equal to true, which evaluates to true and toggles the boolean again.

# Toggle a Boolean using the ternary operator

You can also use the ternary operator to toggle a boolean.

index.js
let bool = true; bool = bool === true ? false : true; console.log(bool); // ๐Ÿ‘‰๏ธ false

toggle boolean using ternary operator

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

If the bool variable stores a true value, the value before the colon (false) is returned, otherwise, the value after the colon (true) is returned.

# Using Bitwise XOR (^) operator

You can also use the Bitwise XOR (^) operator to toggle a boolean and convert it to its integer equivalent.

index.js
let bool = true; bool ^= true; console.log(bool); // ๐Ÿ‘‰๏ธ 0 bool ^= true; console.log(bool); // ๐Ÿ‘‰๏ธ 1

using bitwise xor operator

The bitwise XOR (^) operator will return 0 if the boolean is true and 1 if the boolean is false.

# Toggle a boolean using an if statement

You can also use a simple if statement to toggle a boolean value.

index.js
let bool = true; if (bool === true) { bool = false; } else { bool = true; } console.log(bool);

toggle boolean using if statement

We check if the bool variable stores a true value and if it does, we reassign the variable setting it to false.

Otherwise, we set the variable to true just to be sure the variable stores a boolean.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev