JavaScript Logical Operators (original) (raw)

Last Updated : 13 Dec, 2024

Logical operators in JavaScript are used to perform logical operations on values and return either true or false. These operators are commonly used in decision-making statements like if or while loops to control the flow of execution based on conditions.

In JavaScript, there are basically three types of logical operators.

**1. Logical AND (&&) Operator

The logical AND (&&) operator checks whether both operands are true. If both are true, the result is true. If any one or both operands are false, the result is false.

JavaScript `

// Check if both conditions are true let age = 20; let idProof = true;

// Logical AND checks both conditions if (age >= 18 && idProof) { console.log("Allowed"); } else { console.log("Not Allowed");
}

`

It works with numbers as well, treating 0 as false and any non-zero value as true. It treats false, 0, -0, "", null, undefined, NaN and document.all as false.

In JavaScript, the && operator doesn't return true or false unless explicitly working with boolean values. Instead, it returns the **actual value of the last operand evaluated:

  1. If the first operand (x) is **falsy (like 0, null, undefined, false), it stops and returns that value.
  2. If the first operand is **truthy, it evaluates the second operand and returns its value. JavaScript `

// Logical AND with integers let x = 5; let y = 0;

// 5 (true) && 0 (false) let res = x && y; console.log(res);

// 5 (true) && 10 (true) res = x && 10; console.log(res);

`

**2. Logical OR (||) Operator

The logical OR (||) operator checks whether at least one of the operands is true. If either operand is true, the result is true. If both operands are false, the result is false.

JavaScript `

// Check if at least one condition is true let age = 16; let hasGuardian = true;

// Logical OR checks if either condition is true if (age >= 18 || hasGuardian) { console.log("Allowed"); } else { console.log("Not Allowed"); }

`

**Rules for ||:

  1. If the first operand is truthy, it stops and returns that value.
  2. If the first operand is falsy, it evaluates the second operand and returns its value.

Truthy and Falsy Values in JavaScript

  1. Falsy values: false, 0, null, undefined, NaN, and "" (empty string).
  2. Truthy values: Anything not falsy. JavaScript `

// Logical OR (||) Operator let i = 1; let j = null; let k = undefined; let l = 0;

console.log(j || k); console.log(i || l);

console.log(Boolean(j || k)); console.log(Boolean(i || l));

`

Output

undefined 1 false true

**3. Logical NOT (!) **Operator

The logical NOT (!) operator inverts the boolean value of its operand. If the operand is true, it returns false. If the operand is false, it returns true.

JavaScript `

let isAllowed = true;

console.log(!isAllowed);

JavaScript

let isLoggedIn = false;

if (!isLoggedIn) { console.log("Log in!"); } else { console.log("Welcome back!"); }

`

**Logical NOT Works for Non-Boolean Values

Unlike && and ||, the logical not operator always results in true or false. It consider falsy values (mentioned above with logical or) as false. And all other values as true.

JavaScript `

let x = "Hello"; console.log(!x); console.log(!!x);

let y = 20; console.log(!y); console.log(!!y);

`

Output

false true false true

4. Nullish Coalescing (??) Operator

The nullish coalescing operator (??) returns the right-hand operand when the left-hand operand is either null or undefined. Otherwise, it returns the left-hand operand.

JavaScript `

let username = null; let defaultName = "Guest"; console.log(username ?? defaultName);

username = "Kartik"; defaultName = "Guest"; console.log(username ?? defaultName);

`

**Recommended Links: