✅ Logical Operators in JavaScript – Complete Guide with Real Examples

-

📌 Introduction

Logical operators help you combine conditions, control flow, and make decisions in JavaScript. In this guide, you’ll learn how to use &&, ||, and ! effectively with examples and real-world use cases.

Logical Operators in JavaScript

🔍 What Are Logical Operators?

Logical operators return a boolean value (true or false) and are used to evaluate expressions, especially within conditions like if statements.

Operator Name Example Description
&& Logical AND a && b Returns true if both conditions are true
|| Logical OR a || b Returns true if either condition is true
! Logical NOT !a Reverses the boolean value

✅ 1. Logical AND (&&)


const age = 25;
const isCitizen = true;

if (age > 18 && isCitizen) {
  console.log("You can vote!");
}

Short-circuiting: If the first condition is false, the second one isn’t evaluated.

✅ 2. Logical OR (||)


const hasLicense = false;
const hasPermit = true;

if (hasLicense || hasPermit) {
  console.log("You can drive!");
}

Short-circuiting: If the first condition is true, the second one is skipped.

✅ 3. Logical NOT (!)


const isLoggedIn = false;

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

⚙️ Truthy and Falsy Values

JavaScript uses truthy and falsy values when evaluating expressions.

Falsy values:

  • false
  • 0
  • "" (empty string)
  • null
  • undefined
  • NaN

Truthy values:

  • Non-zero numbers
  • Non-empty strings
  • Arrays & Objects

const username = "";

if (!username) {
  console.log("Username is required!");
}

🧠 Real-World Examples

1. Default Values with OR:


const input = "";
const name = input || "Guest";
console.log(name); // Guest

2. Guard Clause with AND:


const user = { isAdmin: true };

user && user.isAdmin && console.log("Welcome, Admin!");

❗ Gotchas


console.log(0 || "fallback"); // "fallback"
console.log(0 && "fallback"); // 0
console.log(!!"hello"); // true
console.log(!!0); // false

🔄 Combining Multiple Operators


const score = 85;
const isPassed = score >= 50;
const isExcellent = score > 80;

if (isPassed && isExcellent) {
  console.log("You passed with excellence!");
}

🔍 Ternary with Logical Operators


const isLoggedIn = true;
const message = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(message);

🧩 Practice Challenge


function canAccess(age, isLoggedIn) {
  return age >= 18 && isLoggedIn;
}

console.log(canAccess(20, true)); // true
console.log(canAccess(16, false)); // false

❓ FAQs

Can logical operators work with non-boolean values?

Yes! JavaScript converts values using truthy/falsy rules.

Why use || for default values?

It provides a fallback when the first value is falsy.

📌 Summary

  • &&: Both conditions must be true
  • ||: At least one condition must be true
  • !: Reverses a boolean value

🔗 Related Posts

📚 Final Thoughts

Logical operators are foundational tools that power conditional logic and control flow in every JavaScript project. Understanding how they work helps you write smarter, cleaner, and more bug-free code.

Comments

Post a Comment

Popular posts from this blog

🚀 “JavaScript Debounce Made Simple + Live Example!”

-
Image
🧠 Debounce in JavaScript — Explained Simply! Have you ever noticed a search box firing too many requests as you type? Or a button that triggers a function multiple times when clicked repeatedly? That’s where Debounce becomes your best friend! 🚀 What is Debounce? Debounce is a programming pattern used to limit the rate at which a function is executed. It ensures that a function runs only once after a specific delay , and only if the event hasn’t occurred again during that delay. "Debounce waits… and if no new event happens during that wait, it triggers the function!" 🛠 Why Do We Need Debounce? Without debounce, continuous user actions like: Typing in a search input Resizing the window Scrolling the page …can flood your application with function calls, degrading performance and user experience. ✅ With debounce: Smooth performance Controlled API calls Reduced CPU load 📦 Real-Life Example: Search Bar <input type=...
Read more

🔍 Deep Dive into useMemo in React.js: Optimize Performance Like a Pro

-
Image
React is known for its performance and component-based architecture. But as your app grows, rendering performance can become a bottleneck—especially when working with expensive calculations , large data sets , or frequent re-renders . That's where useMemo Hook shines. In this post, we'll explore: ✅ What is useMemo in React? ✅ Why and when should you use it? ✅ Real-world analogies & examples ✅ Common use cases and best practices ✅ Frequently asked questions by React developers ✅ Code examples to guide your implementation Keywords Included: useMemo Hook, performance optimization, memoizing computations, expensive calculations, preventing unnecessary re-renders, React components, stable references, React DevTools, state management, memoization techniques, large data sets, complexity management, function dependencies, child component optimization 🧠 What is useMemo in React? useMemo is a React Hook that memoizes the result of a computatio...
Read more

How to Fix npx tailwindcss init Error: “Could Not Determine Executable to Run”

-
Image
How to Fix npx tailwindcss init Error: “Could Not Determine Executable to Run” Are you getting this error while trying to initialize Tailwind CSS? npx tailwindcss init npm ERR! could not determine executable to run Don’t worry — this is a common issue that’s easy to fix if you understand what’s causing it. This post will guide you step-by-step on how to resolve it. 🔍 Why This Error Happens You haven’t installed the tailwindcss package. You don’t have a package.json file in your project. npx doesn’t know what to run because the executable is missing. ✅ Fix 1: Install Tailwind CSS Before Running the Command First, install Tailwind CLI in your project: npm install -D tailwindcss Now run the init command: npx tailwindcss init ✅ Fix 2: Make Sure You Have package.json If your project is missing package.json , run: npm init -y npm install -D tailwindcss npx tailwindcss init ✅ Fix 3: Clear NPX Cache Sometimes cle...
Read more