javascript

Boolean

Discover JavaScript's Boolean data type, representing `true` or `false`. Learn how these simple values control program logic, comparisons, and conditional statements in your code.

9 min read 8 sections Tutorial

In JavaScript, a Boolean is a simple data type. It can only hold one of two values: `true` or `false`. Understanding Booleans is very important because they help your programs make decisions.

Boolean

In JavaScript, a Boolean is a simple data type. It can only hold one of two values: true or false. Understanding Booleans is very important because they help your programs make decisions. You will use Booleans every time your code needs to check if something is real or not.

What is a Boolean?

A Boolean is a basic JavaScript data type that represents a logical entity and can have only two values: true (meaning yes, correct, or on) or false (meaning no, incorrect, or off).

Decision Making

Booleans are essential for making decisions in your code, like whether to run a specific block of instructions.

True or False

A Boolean variable can only ever store one of two values: true or false, nothing else.

Control Flow

They control the flow of your program using statements like if, else, and loops.

Simple Data Type

Boolean is one of JavaScript's fundamental data types, alongside numbers, strings, and null.

Understanding True and False

Getting Started

Understanding True and False

The simplest way to use a Boolean is to create a variable and give it a true or false value. This is like turning a light switch on or off. You can then check the variable later to see its state. This helps your program remember if something is active or not.

javascriptDeclaring Boolean Variables

1// Declare a variable and set its value to true
2let isLoggedIn = true; // This variable means the user is currently logged in
3
4// Declare another variable and set its value to false
5let hasPermission = false; // This variable means the user does not have permission
6
7// You can print their values to see them
8console.log(isLoggedIn);    // Output: true
9console.log(hasPermission); // Output: false
10
11// You can also change the value later
12isLoggedIn = false; // Now the user is no longer logged in
13console.log(isLoggedIn);    // Output: false

Common Beginner Mistake

Do not confuse the Boolean values true and false with the strings "true" and "false". Strings are text, but Booleans are actual logical values. For example, "true" is a string, but true is a Boolean. They are different things in JavaScript.

Booleans in Comparisons

Booleans are very often the result of a comparison. When you compare two values, JavaScript gives you back either true or false. This is how your code can check if numbers are equal, if one is bigger than another, or if strings match. These comparison results are Booleans.

javascriptUsing Comparison Operators

1let num1 = 10;
2let num2 = 5;
3
4// Check if num1 is greater than num2
5let isGreater = num1 > num2; // This comparison results in true
6console.log(isGreater);      // Output: true
7
8// Check if num1 is equal to num2 (using strict equality ===)
9let isEqual = num1 === num2; // This comparison results in false
10console.log(isEqual);        // Output: false
11
12// Check if a string is equal to another string
13let name1 = "Alice";
14let name2 = "Bob";
15let namesMatch = name1 === name2; // This comparison results in false
16console.log(namesMatch);          // Output: false
17
18let age = 18;
19let canVote = age >= 18; // Check if age is 18 or more. This results in true
20console.log(canVote);    // Output: true

✗ BadBad Practice

let myValue = 5;
let result = myValue = 10; // This is an assignment, not a comparison!
// result will be 10, not a boolean. This is a common mistake.

✓ GoodCorrect Usage

let myValue = 5;
let result = myValue === 10; // Use '===' for strict comparison
// result will be false (a boolean). This correctly checks for equality.

Using Booleans in Conditional Logic

Booleans are very powerful when used with conditional statements like if and else. These statements let your program do different things based on whether a condition is true or false. This is how programs make decisions, like showing a message only if a user is logged in. You can also combine Booleans using logical operators like && (AND), || (OR), and ! (NOT).

Explicit Check (Less Common)

Implicit Check (More Common)

Explicit Check (Less Common)

let userIsActive = true;

if (userIsActive === true) {
  // This code runs only if userIsActive is strictly true
  console.log("User is active and logged in.");
} else {
  console.log("User is not active.");
}

Implicit Check (More Common)

let userIsActive = true;

if (userIsActive) {
  // This code runs if userIsActive is 'truthy'
  // For a boolean, 'true' is truthy, 'false' is falsy
  console.log("User is active and logged in.");
} else {
  console.log("User is not active.");
}

let userIsActive = true;

if (userIsActive === true) {
  // This code runs only if userIsActive is strictly true
  console.log("User is active and logged in.");
} else {
  console.log("User is not active.");
}

let userIsActive = true;

if (userIsActive) {
  // This code runs if userIsActive is 'truthy'
  // For a boolean, 'true' is truthy, 'false' is falsy
  console.log("User is active and logged in.");
} else {
  console.log("User is not active.");
}

Prefer Implicit Checks for Booleans

When you have a variable that is already a Boolean (true or false), it's usually cleaner to use the variable directly in an if statement, like if (myBooleanVar). This implicitly checks if the variable is true. Only use if (myBooleanVar === true) if you need to be very strict about the type and value, which is rare for pure Booleans.

Practical Boolean Use Cases

Booleans are used everywhere in real-world programming. They act as flags to remember states, control UI elements, and validate user input. Imagine a website where you click a 'Like' button. A Boolean variable can remember if you have already liked that post or not. This helps the website behave correctly.

Create a Toggle Flag

Imagine a button that can be 'on' or 'off'. We use a Boolean variable to keep track of its state.

javascriptCreate a Toggle Flag

1let isMenuOpen = false; // The menu starts closed

Check the State and Act

When a user clicks the button, we check the isMenuOpen variable. If it's false, we open the menu. If it's true, we close it.

javascriptCheck the State and Act

1if (isMenuOpen === false) {
2  console.log("Opening menu...");
3  // Code to show the menu goes here
4  isMenuOpen = true; // Now the menu is open
5} else {
6  console.log("Closing menu...");
7  // Code to hide the menu goes here
8  isMenuOpen = false; // Now the menu is closed
9}

Use Logical NOT Operator

A simpler way to toggle a Boolean is to use the ! (NOT) operator. This flips true to false and false to true.

javascriptUse Logical NOT Operator

1let isLightOn = false;
2console.log("Light is on? " + isLightOn); // Output: false
3
4isLightOn = !isLightOn; // Flips false to true
5console.log("Light is on? " + isLightOn); // Output: true
6
7isLightOn = !isLightOn; // Flips true to false again
8console.log("Light is on? " + isLightOn); // Output: false

Ignoring Falsy Values

JavaScript has 'falsy' values like 0, null, undefined, '' (empty string), and NaN. These values are not strictly false, but they behave like false in an if statement. If you're not careful, your code might treat 0 (a number) as false when you expected a strict false Boolean. Always be aware of whether you need a strict === false check or an implicit falsy check.

Boolean Operators and Falsy Values

Operator	Name	Description	Example
!	Logical NOT	Flips a Boolean value. If `true`, it becomes `false`. If `false`, it becomes `true`.	`!true` is `false`
&&	Logical AND	Returns `true` only if both sides are `true`. Otherwise, it's `false`.	`true && false` is `false`
\|\|	Logical OR	Returns `true` if at least one side is `true`. Only `false` if both are `false`.	`true \|\| false` is `true`
===	Strict Equality	Checks if two values are equal and of the same type. Returns a Boolean.	`5 === 5` is `true`

Test Your Knowledge

Quick Check

Which of the following is a Boolean value in JavaScript?

Quick Check

What will console.log(10 > 5) output?

Quick Check

What is the result of !false?

Quick Check

Which of these is NOT a 'falsy' value in JavaScript?

Quick Reference

Pro Tips

1Boolean — A fundamental data type in JavaScript that can only be true or false.
2true — Represents a positive, affirmative, or 'on' logical state.
3false — Represents a negative, negative, or 'off' logical state.
4Comparisons — Operators like ===, >, < return Boolean values based on their evaluation.
5Logical NOT (!) — Flips a Boolean value: !true is false, !false is true.
6Logical AND (&&) — Returns true only if both expressions are true.
7Logical OR (||) — Returns true if at least one expression is true.
8Conditional Statements — Booleans control if, else if, and else blocks to manage program flow.
9Falsy Values — Values like 0, null, undefined, '', NaN are treated as false in a Boolean context.
10Truthy Values — Any value that is not falsy is considered truthy (e.g., "hello", 1, [], {}).

Conditional Statements

Learn how to use if and else to create branching logic based on Boolean conditions.

Comparison Operators

Explore more about ==, !=, <=, >= and their role in generating Booleans.

Logical Operators

Dive deeper into combining conditions with &&, ||, and ! for complex logic.

Other Data Types

Continue your journey by learning about Numbers, Strings, Objects, and Arrays in JavaScript.

You Mastered Booleans!

Congratulations! You now understand the fundamental Boolean data type. You know that Booleans are simple true or false values that are crucial for making decisions and controlling the flow of your JavaScript programs. Keep practicing, and you'll be building dynamic applications in no time!

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next