Logical operators in Javascript - Mini Project: Build & Apply

Logical Operators Practice

📖 Scenario: You are building a simple access control system for a small event. You want to check if a person is allowed entry based on their age and whether they have a ticket.

🎯 Goal: Create a program that uses logical operators to decide if a person can enter the event. The program will check if the person is at least 18 years old and if they have a ticket.

📋 What You'll Learn

Create a variable age with the value 20

Create a variable hasTicket with the value true

Create a variable canEnter that uses the logical AND operator to check if age is at least 18 and hasTicket is true

Print the value of canEnter

💡 Why This Matters

🌍 Real World

Logical operators are used in many real-world programs to make decisions based on multiple conditions, like checking user permissions or filtering data.

💼 Career

Understanding logical operators is essential for programming jobs because they help control the flow of programs and implement rules.

1

Create initial variables

Create a variable called age and set it to 20. Create another variable called hasTicket and set it to true.

Javascript

// Create a variable called age and set it to 20
// Create a variable called hasTicket and set it to true

Hint

Use let to create variables. Set age to 20 and hasTicket to true.

2

Create access condition

Create a variable called canEnter that uses the logical AND operator && to check if age is greater than or equal to 18 and hasTicket is true.

Javascript

let age = 20;
let hasTicket = true;
// Create a variable called canEnter using logical AND to check age >= 18 and hasTicket

Hint

Use let canEnter = (age >= 18) && hasTicket; to combine the conditions.

3

Add a condition for underage without ticket

Modify the canEnter variable to also allow entry if the person is under 18 but has a special pass. First, create a variable called hasSpecialPass and set it to false. Then update canEnter to be true if the person is at least 18 and has a ticket, OR if they have a special pass.

Javascript

let age = 20;
let hasTicket = true;
let canEnter = (age >= 18) && hasTicket;
// Create a variable hasSpecialPass set to false
// Update canEnter to allow entry if age >= 18 and hasTicket, or hasSpecialPass is true

Hint

Use the logical OR operator || to add the special pass condition.

4

Display the result

Print the value of canEnter using console.log().

Javascript

let age = 20;
let hasTicket = true;
let hasSpecialPass = false;
let canEnter = ((age >= 18) && hasTicket) || hasSpecialPass;
// Print canEnter using console.log

Hint

Use console.log(canEnter); to show the result.

Practice

1. Which logical operator in JavaScript returns true only if both conditions are true?

easy

A. ! (NOT)

B. || (OR)

C. && (AND)

D. ? (Ternary)

Solution

1. Step 1: Understand AND operator behavior

   The AND operator (&&) returns true only when both conditions it connects are true.

2. Step 2: Compare with other operators

   The OR operator (||) returns true if at least one condition is true, NOT (!) flips true/false, and ? is a ternary operator, not a logical operator.

3. Final Answer:

   && (AND) -> Option C

4. Quick Check:

   AND = && [OK]

Hint: AND needs both true, so look for && [OK]

Common Mistakes:

• Confusing OR (||) with AND (&&)
• Thinking NOT (!) combines conditions
• Mixing ternary operator with logical operators

2. Which of the following is the correct syntax to negate a boolean variable isActive in JavaScript?

easy

A. not isActive

B. !isActive

C. isActive!

D. isActive.not()

Solution

1. Step 1: Recall NOT operator syntax

   In JavaScript, the NOT operator is a single exclamation mark (!) placed before the variable to flip its boolean value.

2. Step 2: Check each option

   !isActive is the correct syntax. Options A, C, and D are invalid syntax in JavaScript.

3. Final Answer:

   !isActive -> Option B

4. Quick Check:

   NOT = ! before variable [OK]

Hint: Use ! before variable to negate boolean [OK]

Common Mistakes:

• Writing not instead of !
• Placing ! after variable
• Using method calls like .not()

3. What is the output of this code?

const a = true;
const b = false;
console.log(a || b && !b);

medium

A. true

B. undefined

C. false

D. SyntaxError

Solution

1. Step 1: Evaluate NOT operator first

   !b means !false which is true.

2. Step 2: Evaluate AND operator next

   b && !b is false && true which is false.

3. Step 3: Evaluate OR operator last

   a || (result of AND) is true || false which is true.

4. Final Answer:

   true -> Option A

5. Quick Check:

   Operator precedence: ! > && > || = true [OK]

Hint: Remember ! before && before || precedence [OK]

Common Mistakes:

• Ignoring operator precedence
• Evaluating OR before AND
• Misunderstanding ! operator

4. Find the error in this code snippet:

let x = true;
if (x && !x) {
  console.log('Yes');
} else {
  console.log('No');
}

medium

A. The condition x && !x is always false

B. Missing semicolon after if statement

C. Cannot use ! operator on boolean

D. Console.log syntax is wrong

Solution

1. Step 1: Analyze the condition x && !x

   x is true, !x is false, so true && false is always false.

2. Step 2: Understand effect on code flow

   Since condition is always false, 'Yes' will never print, only 'No' will print.

3. Final Answer:

   The condition x && !x is always false -> Option A

4. Quick Check:

   Contradictory condition = always false [OK]

Hint: Check if condition can ever be true [OK]

Common Mistakes:

• Thinking !x is invalid on boolean
• Expecting 'Yes' to print
• Confusing syntax errors with logic errors

5. You want to check if a user is logged in and has admin rights before showing admin panel. Which condition correctly uses logical operators?

const loggedIn = true;
const isAdmin = false;
// Choose the correct condition to show admin panel

hard

A. if (loggedIn || isAdmin) { showAdminPanel(); }

B. if (!loggedIn || !isAdmin) { showAdminPanel(); }

C. if (!loggedIn && isAdmin) { showAdminPanel(); }

D. if (loggedIn && isAdmin) { showAdminPanel(); }

Solution

1. Step 1: Understand requirement

   Both loggedIn and isAdmin must be true to show admin panel.

2. Step 2: Check each condition

   The condition with || (OR) is true if at least one is true. The condition with !loggedIn || !isAdmin is true unless both are true. The condition with !loggedIn && isAdmin is true only if not logged in and is admin. The condition with && (AND) requires both true.

3. Final Answer:

   if (loggedIn && isAdmin) { showAdminPanel(); } -> Option D

4. Quick Check:

   Both true needed = use AND (&&) [OK]

Hint: Use && when all conditions must be true [OK]

Common Mistakes:

• Using OR (||) when both conditions are required
• Negating conditions incorrectly
• Confusing logic for access control