JavaScript Coding Day 13 | JavaScript Operators : Comparison Ternary Logical

JavaScript Operators : Comparison Ternary Logical

Watch the lesson tutorial  🔻

Operators are the building blocks of any programming language. In JavaScript, they allow us to perform logic, math, and comparisons. Below, we break down three essential types: Comparison, Ternary, and Logical operators.

---

1. Comparison Operators

Comparison operators are used to compare two values. They always return a boolean value: either true or false.

The Code:

JavaScript

var x = 6;
var y = 2;

// 1. Loose Equality (==)
console.log(x == y); 
// Output: false 
// Explanation: Checks if 6 is equal to 2. It is not.

// 2. Strict Equality (===)
console.log(x === y); 
// Output: false 
// Explanation: Checks if value AND data type are the same.

// 3. Inequality (!=)
console.log(x != y); 
// Output: true 
// Explanation: Checks if x is NOT equal to y. Since 6 is not 2, this is true.

Detailed Explanation:

• == vs ===: This is a common interview question!

  • == checks only the value (it allows type conversion).

  • === checks both the value and the data type (it is stricter and safer).

• !=: This operator asks, "Are these different?" If they are different, it says true.

---

2. Ternary Operator (Conditional Operator)

The Ternary operator is a shortcut for the if...else statement. It takes three operands: a condition, a result for true, and a result for false.

Syntax: condition ? value_if_true : value_if_false

The Code (Example 1):

Note: Your original snippet a?b was incomplete. A ternary operator requires a colon (:) and a second value for the "false" scenario. Here is the corrected version:

JavaScript

var a = 6;
var b = 2;

// We check: Is a greater than b?
console.log(a > b ? "Yes" : "No");
// Output: "Yes"
// Explanation: Because 6 > 2 is true, it prints the first option.

The Code (Example 2 - Truthy/Falsy Values):

This example demonstrates how JavaScript handles variables as conditions.

JavaScript

var x = 6;
var y = 2;
var z = 8;

console.log(x ? y : z);
// Output: 2

Detailed Explanation:

In the code x ? y : z, JavaScript treats the variable x as a condition.

• Truthy vs Falsy: In JavaScript, numbers other than 0 are considered "Truthy" (true).

• Since x is 6 (which is Truthy), the operator selects the first value, which is y (2).

• If x were 0 (which is Falsy), the output would have been z (8).

---

3. Logical Operators

Logical operators are used to determine the logic between variables or values. They are heavily used in decision-making.

Shutterstock

Explore

The Code:

JavaScript

var c = 0;
var d = 2;
var f = 8;

// 1. Logical AND (&&)
console.log(c && d);
// Output: 0
// Explanation: AND looks for the first falsy value. Since c is 0 (falsy), it stops and returns 0.

// 2. Logical OR (||)
console.log(c || d);
// Output: 2
// Explanation: OR looks for the first truthy value. c is 0 (false), so it moves to d. d is 2 (true), so it returns 2.

// 3. Logical NOT (!)
console.log(!c);
// Output: true
// Explanation: NOT reverses the boolean value. c is 0 (false), so !c becomes true.

Detailed Explanation:

• Short-Circuit Evaluation:

  • && (AND): If the first value is false, it stops immediately and returns it. It doesn't bother checking the second value.

  • || (OR): If the first value is true, it stops immediately and returns it.

• ! (NOT): This simply flips the switch. True becomes false, and false becomes true.

---

Summary Table for your Readers

Operator Type	Symbol	Description
Comparison	==, ===	Compares values (and types).
Ternary	? :	A one-line shorthand for if...else.
Logical	&&, ||, !	Logic gates used for boolean checks.

Run Today's Lesson Codes on NextLeap (Click Here)

- by Chirana Nimnaka