Lesson 4

Diving Into JavaScript Comparison Operators: A Beginner’s Guide

Overview and Lesson Plan

Greetings, Explorer! Today, we're delving into JavaScript Comparison Operators. Decisions in life and programming often stem from comparisons. Our journey today will demonstrate how comparison operators in JavaScript compare values, forming rules that impact decision-making.

Introduction to JavaScript Comparison Operators

Life is about comparisons, just like JavaScript. JavaScript comparison operators such as ==, !=, ===, !==, >, <, >=, <= enable decision-making. Consider the following comparison of two numbers:

JavaScript
1let number5 = 5; 2let number10 = 10; 3 4console.log(number5 == number10); // false, because 5 is not equal to 10 5console.log(number5 === number10); // false, because 5 is not equal to 10 6console.log(number5 != number10); // true, because 5 is indeed not equal to 10 7console.log(number5 !== number10); // true, because 5 is indeed not equal to 10 8console.log(number5 > number10); // false, because 5 is not greater than 10 9console.log(number5 < number10); // true, because 5 is less than 10 10console.log(number5 >= number10); // false, because 5 is neither greater than nor equal to 10 11console.log(number5 <= number10); // true, because 5 is less than or equal to 10

In the example above, we covered all comparison operators, and we are going to discuss some of them in detail in the next sections.

Diving Deep into JavaScript Comparison Operators

As we dive deeper into JavaScript comparison operators, take note of the differences between double equals (==) and triple equals (===), and not equals (!=) and not strictly equals (!==) operators.

  • Equal to (==), Not equal to (!=) - These consider value only, disregarding type.
JavaScript
1console.log(5 == "5"); // true, because the value 5 equals the string "5", even though the types are different 2console.log(5 != "5"); // false, because they are equal in value
  • Strictly equal to (===), Not strictly equal to (!==)
    • These consider both value and type.
JavaScript
1console.log(5 === "5"); // false, their types differ (number and string) 2console.log(5 !== "5"); // true, as both type and value don't match

So, as you can see, === and !== are basically safer if you need to make sure that compared variables not only have the same value but also the same type. Understanding these differences is absolutely essential for decision-making in programming!

Chaining JavaScript Comparison Operators: AND operator

Imagine a roller coaster that allows riders who are 13 years or older but less than 19 years. Here, chained comparison operators come in handy:

JavaScript
1let age = 15; 2 3console.log(age >= 13 && age <= 18); // true, because 15 is between 13 and 18

We used the logical AND operator && to chain the comparisons. The statement inside the parentheses returns true only if both conditions are true, i.e., both age >= 13 and age <= 18 are satisfied.

Chaining Comparison Operators: OR operator

In JavaScript, we also have the logical OR operator || used to chain multiple conditions. The statement returns true if any or both conditions are true.

Imagine a theme park that allows entrance to individuals who are 12 years and below or 65 and older. You can use the logical OR operator || to represent this:

JavaScript
1let age = 70; 2 3console.log(age <= 12 || age >= 65); // true, because 70 is greater than 65

In the above example, the condition age <= 12 returned false, but age >= 65 returned true. Because one of the conditions returned true and we're using the logical OR operator, the entire statement also returns true.

Lesson Summary

Great job! We've navigated through JavaScript comparison operators. You've learned about these operators, their differences, and how to chain them for complex conditions.

Next up are interactive sessions to reinforce these concepts through practice. The accurate application of comparison operators and chaining them for complex conditions are cornerstone skills in programming. Remember, practice leads to improvement! Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.