Why Comparison operators in Javascript? - Purpose & Use Cases

The Big Idea

What if you could instantly compare any two things in your code without guessing or mistakes?

The Scenario

Imagine you have a list of friends' ages and you want to find out who is older than 18. Without comparison operators, you'd have to check each age manually, like asking each friend one by one if they are older than 18.

The Problem

Doing this manually is slow and easy to mess up. You might forget to check some ages or mix up the numbers. It's like trying to compare heights by guessing instead of measuring--errors happen and it takes too long.

The Solution

Comparison operators let you quickly and clearly check conditions like 'greater than' or 'equal to' in your code. They make it easy to compare values and decide what to do next, saving time and avoiding mistakes.

Before vs After

✗ Before

if (age === 18 || age === 19 || age === 20) { console.log('Adult'); }

✓ After

if (age >= 18) { console.log('Adult'); }

What It Enables

With comparison operators, you can easily make decisions in your programs based on how values relate to each other.

Real Life Example

Think about a website that only lets users enter if they are 18 or older. Comparison operators help the site check the user's age quickly and correctly.

Key Takeaways

Manual checks are slow and error-prone.

Comparison operators simplify checking conditions.

They help programs make smart decisions based on values.

Practice

1. Which comparison operator checks if two values are equal in both value and type in JavaScript?

easy

A. !==

B. ==

C. !=

D. ===

Solution

1. Step 1: Understand equality operators

   == checks value equality but ignores type, while === checks both value and type.

2. Step 2: Identify strict equality operator

   === is the strict equality operator that compares both value and type.

3. Final Answer:

   === -> Option D

4. Quick Check:

   Strict equality = === [OK]

Hint: Use === to check value and type equality [OK]

Common Mistakes:

• Confusing == with ===
• Using != instead of !==
• Assuming == checks type

2. Which of the following is the correct syntax to check if variable a is NOT equal to variable b in both value and type?

easy

A. a !== b

B. a != b

C. a =! b

D. a !=== b

Solution

1. Step 1: Identify the strict inequality operator

   !== checks if two values are not equal in value or type.

2. Step 2: Check syntax correctness

   a !== b is correct syntax; others are either loose inequality or invalid.

3. Final Answer:

   a !== b -> Option A

4. Quick Check:

   Strict not equal = !== [OK]

Hint: Use !== for strict not equal check [OK]

Common Mistakes:

• Using != which ignores type
• Typing =! instead of !==
• Using too many equals signs

3. What will be the output of the following code?

console.log(5 == '5');
console.log(5 === '5');

medium

A. truetrue

B. truefalse

C. falsetrue

D. falsefalse

Solution

1. Step 1: Evaluate 5 == '5'

   Loose equality == converts types, so number 5 equals string '5', result is true.

2. Step 2: Evaluate 5 === '5'

   Strict equality === checks type too; number 5 is not string '5', result is false.

3. Final Answer:

   true
   false -> Option B

4. Quick Check:

   == true, === false [OK]

Hint: == compares value only; === compares value and type [OK]

Common Mistakes:

• Assuming both comparisons return true
• Confusing == and === behavior
• Ignoring type differences

4. Find the error in this code snippet:

if (a = 10) {
  console.log('Equal');
} else {
  console.log('Not equal');
}

medium

A. Variable a is not declared

B. Should use == instead of =

C. Should use === instead of =

D. No error, code is correct

Solution

1. Step 1: Identify assignment vs comparison

   = assigns value 10 to a, not compares it.

2. Step 2: Use strict equality for comparison

   Replace = with === to compare value and type correctly.

3. Final Answer:

   Should use === instead of = -> Option C

4. Quick Check:

   Use === for comparison, not = [OK]

Hint: Use === for comparison, = is assignment [OK]

Common Mistakes:

• Using = instead of == or ===
• Ignoring variable declaration
• Assuming no error in if condition

5. You want to check if a variable score is between 50 and 100 inclusive. Which expression correctly uses comparison operators to do this?

hard

A. score >= 50 && score <= 100

B. 50 <= score <= 100

C. score > 50 || score < 100

D. score == 50 && score == 100

Solution

1. Step 1: Understand range checking in JavaScript

   JavaScript does not support chained comparisons like 50 <= score <= 100 as in math.

2. Step 2: Use logical AND with two comparisons

   Use score >= 50 && score <= 100 to check both conditions separately.

3. Final Answer:

   score >= 50 && score <= 100 -> Option A

4. Quick Check:

   Use && with two comparisons for range [OK]

Hint: Use && with two comparisons for ranges [OK]

Common Mistakes:

• Using chained comparisons like 50 <= score <= 100
• Using || instead of &&
• Checking equality to both ends simultaneously