Logical Operators in JavaScript and TypeScript: OR, AND, and NOT 2024

Logical Operators in JavaScript and TypeScript: OR, AND, and NOT

In JavaScript and TypeScript, there are four logical operators: || (OR), && (AND), ! (NOT), and ?? (Nullish Coalescing). In this article, we'll cover the first three operators in detail. These operators can be applied to values of any type, not just boolean, and their results can also be of any type.

|| (OR)

The OR operator is represented by two vertical lines: ||.

Basic Usage

• In classical programming, logical OR is used to manipulate boolean values. If any of its arguments are true, it returns true; otherwise, it returns false.

JavaScript Example:

console.log(true || true);   // true
console.log(false || true);  // true
console.log(true || false);  // true
console.log(false || false); // false

TypeScript Example:

console.log(true || true);   // true
console.log(false || true);  // true
console.log(true || false);  // true
console.log(false || false); // false

• In JavaScript, OR is a bit more versatile. It can be applied to non-boolean values, which are converted to boolean for evaluation.

JavaScript Example:

if (1 || 0) { // 1 is truthy, 0 is falsy
  console.log('At least one is truthy!');
}

TypeScript Example:

if (1 || 0) { // 1 is truthy, 0 is falsy
  console.log('At least one is truthy!');
}

Practical Example

JavaScript Example:

let officeHour = 9;
let isHoliday = false;

if (officeHour < 10 || officeHour > 18 || isHoliday) {
  console.log('The office is closed.');
} else {
  console.log('The office is open.');
}

TypeScript Example:

let officeHour: number = 9;
let isHoliday: boolean = false;

if (officeHour < 10 || officeHour > 18 || isHoliday) {
  console.log('The office is closed.');
} else {
  console.log('The office is open.');
}

Finding the First Truthy Value

• OR evaluates operands from left to right, returning the first truthy value or the last value if none are truthy.

JavaScript Example:

console.log(1 || 0);          // 1 (truthy)
console.log(null || 'Hello'); // 'Hello' (truthy)
console.log(null || 0 || 5);  // 5 (first truthy)
console.log(undefined || null || 0); // 0 (all falsy, returns last)

TypeScript Example:

console.log(1 || 0);          // 1 (truthy)
console.log(null || 'Hello'); // 'Hello' (truthy)
console.log(null || 0 || 5);  // 5 (first truthy)
console.log(undefined || null || 0); // 0 (all falsy, returns last)

Funny Example

• Imagine you have three potential names and want to use the first available one.

JavaScript Example:

let firstName = "";
let middleName = "";
let nickname = "CoderExtraordinaire";

console.log(firstName || middleName || nickname || "Anonymous"); // CoderExtraordinaire

TypeScript Example:

let firstName: string = "";
let middleName: string = "";
let nickname: string = "CoderExtraordinaire";

console.log(firstName || middleName || nickname || "Anonymous"); // CoderExtraordinaire

Short-Circuit Evaluation

• OR stops evaluating as soon as it finds a truthy value. This is useful for avoiding unnecessary calculations or function calls.

JavaScript Example:

true || console.log("This won't be printed");
false || console.log("This will be printed");

TypeScript Example:

true || console.log("This won't be printed");
false || console.log("This will be printed");

&& (AND)

• The AND operator is represented by two ampersands: &&.

Basic Usage

• In classical programming, AND returns true only if both operands are true; otherwise, it returns false.

JavaScript Example:

console.log(true && true);   // true
console.log(false && true);  // false
console.log(true && false);  // false
console.log(false && false); // false

TypeScript Example:

console.log(true && true);   // true
console.log(false && true);  // false
console.log(true && false);  // false
console.log(false && false); // false

Practical Example

JavaScript Example:

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  console.log('The time is 12:30');
}

let hour: number = 12;
let minute: number = 30;

if (hour == 12 && minute == 30) {
  console.log('The time is 12:30');
}

Finding the First Falsy Value

• AND evaluates operands from left to right, returning the first falsy value or the last value if all are truthy.

JavaScript Example:

console.log(1 && 0);         // 0 (first falsy)
console.log(1 && 5);         // 5 (both truthy)
console.log(null && 'Hi');   // null (first falsy)
console.log(0 && 'Nope');    // 0 (first falsy)
console.log(1 && 2 && null); // null (first falsy)
console.log(1 && 2 && 3);    // 3 (all truthy)

TypeScript Example:

console.log(1 && 0);         // 0 (first falsy)
console.log(1 && 5);         // 5 (both truthy)
console.log(null && 'Hi');   // null (first falsy)
console.log(0 && 'Nope');    // 0 (first falsy)
console.log(1 && 2 && null); // null (first falsy)
console.log(1 && 2 && 3);    // 3 (all truthy)

Funny Example

• Imagine you want to check if someone is both a developer and funny.

JavaScript Example:

let isDeveloper = true;
let isFunny = true;

if (isDeveloper && isFunny) {
  console.log("You must be a joy at tech meetups!");
} else {
  console.log("You might be missing out on some fun!");
}

TypeScript Example:

let isDeveloper: boolean = true;
let isFunny: boolean = true;

if (isDeveloper && isFunny) {
  console.log("You must be a joy at tech meetups!");
} else {
  console.log("You might be missing out on some fun!");
}

Short-Circuit Evaluation

• AND stops evaluating as soon as it finds a falsy value.

JavaScript Example:

false && console.log("This won't be printed");
true && console.log("This will be printed");

TypeScript Example:

false && console.log("This won't be printed");
true && console.log("This will be printed");

! (NOT)

• The NOT operator is represented by an exclamation mark: !.

JavaScript Example:

console.log(!true); // false
console.log(!0);    // true

TypeScript Example:

console.log(!true); // false
console.log(!0);    // true

• Double NOT for Boolean Conversion
• Double NOT !! is often used to convert a value to its boolean equivalent.

JavaScript Example:

console.log(!!"non-empty string"); // true
console.log(!!0);                  // false

TypeScript Example:

console.log(!!"non-empty string"); // true
console.log(!!0);                  // false

Funny Example

• Imagine you want to check if someone is NOT a morning person.

JavaScript Example:

let isMorningPerson = false;

if (!isMorningPerson) {
  console.log("Good thing we have coffee!");
} else {
  console.log("Rise and shine!");
}

TypeScript Example:

let isMorningPerson: boolean = false;

if (!isMorningPerson) {
  console.log("Good thing we have coffee!");
} else {
  console.log("Rise and shine!");
}

• Boolean Function Alternative
• The Boolean function can also be used for conversion.

JavaScript Example:

console.log(Boolean("non-empty string")); // true
console.log(Boolean(0));                  // false

TypeScript Example:

console.log(Boolean("non-empty string")); // true
console.log(Boolean(0));                  // false

Summary

Logical operators in JavaScript and TypeScript are versatile and can be used for more than just boolean values. They help in writing concise and efficient code with features like short-circuit evaluation.

• OR (||): Returns the first truthy value or the last value if none are truthy.
• AND (&&): Returns the first falsy value or the last value if all are truthy.
• NOT (!): Inverts the boolean value of its operand, with double NOT (!!) used for boolean conversion.

Call to Action  

How do you think AI will shape the future of technology? Share your thoughts in the comments below. For more insights into the latest tech trends, visit our website PlambIndia and stay updated with our blog.  

Follow Us  

Stay updated with our latest projects and insights by following us on social media:  

- LinkedIn: PlambIndia Software Solutions  

- PlambIndia: Plambindia Software Solution.

- WhatsApp Number: +91 87663 78125

- Email: contact@plambIndia.com , kuldeeptrivedi456@gmail.com