Comparison operators in Javascript - Step-by-Step Execution

Concept Flow - Comparison operators

Start

↓

Evaluate Left Value

↓

Evaluate Right Value

↓

Apply Comparison Operator

↓

Result: true or false

↓

Use Result in Condition or Output

↓

End

The program compares two values using a comparison operator and produces true or false as the result.

Execution Sample

Javascript

let a = 5;
let b = 10;
let result = a < b;
console.log(result);

This code compares if 5 is less than 10 and prints the result.

Execution Table

Step	Expression	Evaluation	Result
1	a = 5	Assign 5 to a	a = 5
2	b = 10	Assign 10 to b	b = 10
3	a < b	5 < 10	true
4	result = a < b	result = true	result = true
5	console.log(result)	Print result	true

💡 Program ends after printing true because 5 is less than 10.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
a	undefined	5	5	5	5
b	undefined	undefined	10	10	10
result	undefined	undefined	undefined	true	true

Key Moments - 3 Insights

Why does 'a < b' return true even though both are numbers?

'a < b' compares the numeric values of a and b. Since 5 is less than 10, the comparison returns true as shown in step 3 of the execution_table.

What happens if we use '==' instead of '<'?

'==' checks if values are equal. If we used 'a == b', it would return false because 5 is not equal to 10. This is different from '<' which checks order.

Why do we assign the comparison result to 'result'?

Assigning the comparison to 'result' stores the true/false value so we can use it later, like printing it in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'result' after step 4?

A true

B false

C undefined

D 5

💡 Hint

Check the 'Result' column in row for step 4 in execution_table.

At which step does the comparison 'a < b' get evaluated?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step where the expression 'a < b' is evaluated in execution_table.

If we change 'a' to 15, what would be the result of 'a < b' at step 3?

A undefined

B true

C false

D error

💡 Hint

Compare 15 and 10 using '<' operator as shown in step 3 evaluation.

Concept Snapshot

Comparison operators compare two values and return true or false.
Common operators: <, >, <=, >=, ==, !=.
Used to check order or equality.
Result is boolean (true/false).
Example: let result = a < b;
Use result in conditions or output.

Full Transcript

This visual trace shows how comparison operators work in JavaScript. We start by assigning values to variables a and b. Then we compare a and b using the less than operator '<'. The comparison evaluates to true because 5 is less than 10. We store this result in the variable 'result' and print it. The execution table shows each step clearly, and the variable tracker shows how values change. Key moments explain why the comparison returns true and how different operators behave. The quiz tests understanding of the steps and results.

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