JavaScript - Logical Operators

Hello there, future JavaScript wizards! Today, we're going to embark on an exciting journey into the world of logical operators. Don't worry if you're new to programming – I'll be your friendly guide, and we'll explore this topic step by step. By the end of this lesson, you'll be wielding logical operators like a pro!

JavaScript Logical Operators

Logical operators are the decision-makers of the programming world. They help us make choices and control the flow of our code. In JavaScript, we have three main logical operators:

Operator	Name	Description
&&	AND	Returns true if both operands are true
||	OR	Returns true if at least one operand is true
!	NOT	Reverses the boolean value of its operand

Let's dive into each of these operators and see how they work their magic!

JavaScript Logical AND (&&) Operator

The AND operator (&&) is like a strict parent – it only returns true if both of its operands are true. If either operand is false, the result is false.

Let's look at some examples:

let isAdult = true;
let hasID = true;

console.log(isAdult && hasID); // Output: true

let isTired = true;
let hasCoffee = false;

console.log(isTired && hasCoffee); // Output: false

In the first example, both isAdult and hasID are true, so the result is true. It's like saying, "You can enter the club if you're an adult AND you have an ID." Both conditions must be met.

In the second example, even though isTired is true, hasCoffee is false, so the result is false. It's like saying, "I'll be productive if I'm tired AND I have coffee." Since there's no coffee, productivity is not happening!

JavaScript Logical OR (||) Operator

The OR operator (||) is more lenient – it returns true if at least one of its operands is true. It only returns false if both operands are false.

Here are some examples:

let hasCash = true;
let hasCard = false;

console.log(hasCash || hasCard); // Output: true

let isRaining = false;
let isSnowing = false;

console.log(isRaining || isSnowing); // Output: false

In the first example, hasCash is true, so even though hasCard is false, the result is true. It's like saying, "You can buy the item if you have cash OR a card." Having either is enough.

In the second example, both isRaining and isSnowing are false, so the result is false. It's like saying, "I'll stay inside if it's raining OR snowing." Since neither is happening, you're free to go outside!

JavaScript Logical NOT (!) Operator

The NOT operator (!) is the rebel of the bunch – it flips the boolean value of its operand. If something is true, it makes it false, and vice versa.

Let's see it in action:

let isSunny = true;

console.log(!isSunny); // Output: false

let isMonday = false;

console.log(!isMonday); // Output: true

In the first example, isSunny is true, but !isSunny is false. It's like saying, "It's not sunny," when it actually is.

In the second example, isMonday is false, but !isMonday is true. It's like celebrating that it's not Monday!

Logical Operators Precedence

Just like in math, logical operators have an order of precedence. Here's how they rank:

1. NOT (!)
2. AND (&&)
3. OR (||)

This means that NOT is evaluated first, then AND, and finally OR. Let's see an example:

let a = true;
let b = false;
let c = true;

console.log(a || b && !c); // Output: true

Here's how this is evaluated:

1. First, !c is evaluated: !true becomes false
2. Then, b && false is evaluated: false && false is false
3. Finally, a || false is evaluated: true || false is true

So, the final result is true.

Short Circuit Evaluation

Short circuit evaluation is a neat trick that JavaScript uses to optimize logical operations. It means that in some cases, JavaScript doesn't need to evaluate all parts of a logical expression to determine the result.

For the AND operator:

console.log(false && anything); // Output: false

In this case, JavaScript knows that if the first operand is false, the entire expression will be false, so it doesn't even bother evaluating anything.

For the OR operator:

console.log(true || anything); // Output: true

Here, JavaScript sees that the first operand is true, so it knows the entire expression will be true, regardless of what anything is.

This can be really useful for avoiding errors. For example:

let user = null;

console.log(user && user.name); // Output: null

If user is null, JavaScript short circuits and returns null without trying to access user.name, which would cause an error.

And there you have it, folks! You've just completed your crash course in JavaScript logical operators. Remember, these little symbols are powerful tools in your programming toolkit. They help you make decisions, control your code flow, and even prevent errors.

As you continue your JavaScript journey, you'll find yourself using these operators more and more. Don't be afraid to experiment with them – that's how you'll truly master their use. Happy coding, and may your logical operations always yield the results you expect!

Credits: Image by storyset