Lesson: JavaScript Relational Operators


Introduction

Relational operators in JavaScript are used to compare two values, returning a Boolean value (true or false) based on the relationship. Relational operators are extremley similar to math functions such as less than or equal too.

Common Relational Operators

  • ==: Equal to, checks if two values are the same (e.g., verifying a password match).
  • !=: Not equal to, checks if two values are different (e.g., ensuring input changes).
  • ===: Strict equal to, checks equality and type (e.g., validating exact user ID).
  • !==: Strict not equal to, checks inequality and type (e.g., ensuring different type or value).
  • >: Greater than, left value is larger than the right (e.g., comparing scores or ages).
  • <: Less than, left value is smaller than the right (e.g., setting age limits).
  • >=: Greater than or equal to, left value is larger or equal (e.g., minimum age validation).
  • <=: Less than or equal to, left value is smaller or equal (e.g., ensuring max quantity in cart).

    Example: Using Relational Operators in JavaScript

    Let’s consider an example where we compare a person’s age with a minimum age requirement.

// Example demonstrating relational operators in JavaScript

let age = 20;
let minimumAge = 18;

// Equal to (==)
console.log(age == minimumAge); // false

// Not equal to (!=)
console.log(age != minimumAge); // true

// Strict equal to (===)
console.log(age === minimumAge); // false

// Strict not equal to (!==)
console.log(age !== minimumAge); // true

// Greater than (>)
console.log(age > minimumAge); // true

// Less than (<)
console.log(age < minimumAge); // false

// Greater than or equal to (>=)
console.log(age >= minimumAge); // true

// Less than or equal to (<=)
console.log(age <= minimumAge); // false

## Example: Using Relational Operators in JavaScript
Let's consider an example where we compare a person's age with a minimum age requirement.



```python
// Example demonstrating relational operators in JavaScript

let age = 20;
let minimumAge = 18;

// Equal to (==)
console.log(age == minimumAge); // false

// Not equal to (!=)
console.log(age != minimumAge); // true

// Strict equal to (===)
console.log(age === minimumAge); // false

// Strict not equal to (!==)
console.log(age !== minimumAge); // true

// Greater than (>)
console.log(age > minimumAge); // true

// Less than (<)
console.log(age < minimumAge); // false

// Greater than or equal to (>=)
console.log(age >= minimumAge); // true

// Less than or equal to (<=)
console.log(age <= minimumAge); // false
Relational Operators Example

Relational Operators Example



    


Logical Operators

NOT function


What is it?

The NOT function for booleans is a logical operator that inverts the value of a boolean expression. In simple terms:

If the input is TRUE, the NOT function returns FALSE. If the input is FALSE, the NOT function returns TRUE. The NOT function operates on a single boolean value (it is a unary operator).

In Boolean algebra:

NOT(A)=¬A

Where

  • A is a boolean value, and
  • ¬𝐴 is the negation of 𝐴

For example:

NOT(TRUE) = FALSE

NOT(FALSE) = TRUE

In programming languages, the NOT function is often represented by symbols like ! or the keyword not. For example:

  • In C, C++, Java, etc.: !TRUE == FALSE
  • In Python: not True == False

### Real World Example:

Essentially the NOT function is an INVERSE function

  • You put your shoes on in the morning, and you take your shoes off in the night
  • Wrapping a present before Christmas, unwrapping a present after Christmas
  • Setting up decorations for Halloween, taking out decorations after Halloween
  • When you convert Celcius to Farenheit, you are multiplying and adding, but when you convert Farenhiet to Celcius, you are subtracting and adding.

### Coding Example in Javascript:

%%javascript
<script>
        // Initial state of the light (false = OFF, true = ON)
        let lightOn = false;

        // Function to toggle the light
        function toggleLight() {
            // Use the NOT function to invert the state of the light
            lightOn = !lightOn;

            // Get the light element
            const lightDiv = document.getElementById('light');

            // Update the light state and display based on the new state
            if (lightOn) {
                lightDiv.className = 'light-on';
                lightDiv.textContent = 'The light is ON';
            } else {
                lightDiv.className = 'light-off';
                lightDiv.textContent = 'The light is OFF';
            }
        }
</script>
<IPython.core.display.Javascript object>

AND FUNCTION

_____________________-

What is it?

The Boolean AND function is a logical operation that outputs true if both of its operands are true; otherwise, it outputs false.

Here’s the formal definition of the Boolean AND function for two operands

𝐴 and 𝐵:

𝐴∧𝐵 = true if and only if both 𝐴 = true and 𝐵 = true 𝐴∧𝐵 = false if 𝐴 = false or 𝐵 = false.

If both 𝐴 and 𝐵 are true, then 𝐴∧𝐵 = true If 𝐴 is false or 𝐵 is false, or 𝐴 and 𝐵 is false, then 𝐴∧𝐵 = false

Real World Example:

  • You have to scan your keycard and enter a pin to access a safe
  • When you want to throw away your trash, you need to open the trash can and throw away your trash
  • To use your phone, you must turn it on and put your passcode in

Coding Example in Javascript:

%%javascript
function isEligibleToVote(age) {
    return age >= 18;
}

// Example usage
let age1 = 20;
let age2 = 15;

result = console.log(isEligibleToVote(age1));  
result = console.log(isEligibleToVote(age2));  

print(result)
<IPython.core.display.Javascript object>

OR


What is it?

The Boolean OR function is a logical operation that evaluates two or more Boolean values (true or false) and returns:

True if at least one of the input values is true. False if all input values are false.

The Boolean OR function is inclusive since it returns true if one of or both inputs are true. So as long as one condition is met, the outcome is positive (True).

Real World Example:

Conditions:

  • It is sunny outside
  • It is hot outside

If one of these conditions are met, I will go outside to swim.

If both of these conditions are not met, I will not go outside to swim.

Coding Example in Javascript:

%%javascript

let isSunny = true;
let isWeekend = false;

if (isSunny || isWeekend) {
  console.log("Let's go outside!");
} else {
  console.log("Maybe stay inside.");
}
<IPython.core.display.Javascript object>

Summary: JavaScript Relational Operators

Relational operators in JavaScript are used to compare two values, returning a Boolean (true or false). Common operators include:

  • ==: Equal to (checks value equality).
  • !=: Not equal to (checks value inequality).
  • ===: Strictly equal (checks value and type).
  • !==: Strictly not equal (checks inequality in value and type).
  • > and <: Greater than / Less than.
  • >= and <=: Greater than or equal to / Less than or equal to.

These are useful in everyday scenarios, like comparing ages or verifying passwords.