DEV Community

Cover image for Mastering Logical Operators in JavaScript: `||`, `&&`, and `!`
codenextgen
codenextgen

Posted on

Mastering Logical Operators in JavaScript: `||`, `&&`, and `!`

In this blog, we'll explore the logical operators in JavaScript: || (OR), && (AND), and ! (NOT). These operators are essential for creating complex conditions and controlling the flow of your programs. Let's dive in!

Logical Operator || (OR)

The || operator returns the first truthy value it encounters. If all values are falsy, it returns the last value.

Syntax:

result = value1 || value2 || value3;

Enter fullscreen mode Exit fullscreen mode

Example:

let a = false;
let b = null;
let c = "Hello";

let result = a || b || c;
console.log(result); // Output: "Hello"

Enter fullscreen mode Exit fullscreen mode

Explanation:

  • a is false (falsy).
  • b is null (falsy).
  • c is "Hello" (truthy).

The || operator returns the first truthy value, which is "Hello".

Logical Operator && (AND)

The && operator returns the first falsy value it encounters. If all values are truthy, it returns the last value.

Syntax:

result = value1 && value2 && value3;

Enter fullscreen mode Exit fullscreen mode

Example:

let x = true;
let y = 10;
let z = 0;

let result = x && y && z;
console.log(result); // Output: 0

Enter fullscreen mode Exit fullscreen mode

Explanation:

  • x is true (truthy).
  • y is 10 (truthy).
  • z is 0 (falsy).

The && operator returns the first falsy value, which is 0.

Logical Operator ! (NOT)

The ! operator returns the opposite boolean value of its operand.

Syntax:

result = !value;

Enter fullscreen mode Exit fullscreen mode

Example:

let isTrue = true;
let isFalse = !isTrue;

console.log(isFalse); // Output: false

Enter fullscreen mode Exit fullscreen mode

Explanation:

  • isTrue is true.
  • !isTrue returns false.

Practical Examples

Let's put everything together with some practical examples:

Using || for Default Values

function greet(name) {
  name = name || "Guest";
  console.log("Hello, " + name + "!");
}

greet("Alice"); // Output: Hello, Alice!
greet(); // Output: Hello, Guest!

Enter fullscreen mode Exit fullscreen mode

Explanation:

  • If name is not provided, the || operator assigns the default value "Guest".

Using && for Conditional Execution

let user = {
  name: "John",
  age: 25,
  isAdmin: true
};

if (user.isAdmin && user.age > 18) {
  console.log("Welcome, Admin!");
} else {
  console.log("Welcome, User!");
}

Enter fullscreen mode Exit fullscreen mode

Explanation:

  • The && operator checks if both conditions (user.isAdmin and user.age > 18) are true.

Using ! for Negation

let isLoggedIn = false;

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

Enter fullscreen mode Exit fullscreen mode

Explanation:

  • The ! operator negates the value of isLoggedIn. If isLoggedIn is false!isLoggedIn is true.

Summary

  • || (OR): Returns the first truthy value or the last value if all are falsy.
  • && (AND): Returns the first falsy value or the last value if all are truthy.
  • ! (NOT): Returns the opposite boolean value of its operand.

Conclusion

Logical operators are powerful tools in JavaScript that allow you to create complex conditions and control the flow of your programs. By mastering ||, &&, and !, you'll be able to write more dynamic and efficient code. Keep practicing and exploring to deepen your understanding of logical operators in JavaScript.

Stay tuned for more in-depth blogs on JavaScript! Happy coding!

Top comments (0)