Understand The Comparison Operators In Javascript And Write Logic Like A Pro

Published on | by
Reza Baharvand
Updated on
Image for Understand The Comparison Operators In Javascript And Write Logic Like A Pro

Introduction

A comparison operator compares two values with each other and returns a logical value such as true or false.

The operands can be number, string, logical, or object values.

Javascript can be smart when making decisions and comparing two values with each other. If a value type is string and is being compared to a number, Javascript coerces the type and compares the values.

For example, the number 3 is equal to the string "3", unless you are comparing the two values strictly.

There are 8 comparison operators in total, and in this tutorial, you are going to learn about each of them with an example.

By the end of this tutorial, you will be able to build a digital blood-pressure monitoring app.

1 — Equal (==)

If you want to check two values are equal to each other, you can use the == operator:

let num = 4; num == 4; // true num == 3; // false

Example

In this example, you will write a function to return "It is True" if the values are equal, and return "It is False" if they are NOT equal.

function isEqual(a, b) { if (a == b) { console.log("It is True"); } else { console.log("It is False"); } } isEqual(4, 4); // It is True isEqual(4, 5); // It is False

2 — Not Equal (!=)

To check if two values are NOT equal, you will need to use the != operator.

let num = 4; num != 3; // false num != 4; // true

Example

In the example below, you will write a function to check if the two given values are not equal and return a statement:

function isNotOrange(fruit) { if (fruit != "🍊") { console.log(`${fruit} is not 🍊 orange`); } else { console.log(`${fruit} is 🍊 orange`); } } isNotOrange("🍏"); // 🍏 is not 🍊 orange isNotOrange("🍊"); // 🍊 is 🍊 orange

The logic (🍏 != "🍊") returns true. The 🍏 apple is not 🍊 orange, and that is true!

3 — Strictly Equal (===)

The Strict Equality operator === not only checks if the values are equal to each other, but also checks if the two values are of the same type.

let num = 4; num == "4"; // true num === "4"; // false

4 — Strictly Not Equal (!==)

The Strictly Not Equal operator !==, checks if the values and their type are not equal.

You Shall Not Pass gif

let num = 4; num != "4"; // false num !== "4"; // true

5 — Greater Than (>)

The greater than > operator returns true if the left operand is greater than the right operand.

In the following example, you will write a function to check the body temperature; return "Low", "Normal", and "High" based on the given number.

function checkTemp(num) { if (num > 37) { console.log("High temperature"); } else if (num == 37) { console.log("Normal temperature"); } else { console.log("Low Temperature"); } } checkTemp(39); // High temperature checkTemp(37); // Normal temperature checkTemp(34); // Low temperature

6 — Greater Than Or Equal (>=)

The >= operator, returns true if the left operand is greater than or equal to the right operand:

4 >= 3; // true 4 >= 4; // true 4 >= 4.005; // false

7 — Less Than (<)

The less than < operator return true if the left operand is less than the right operand.

4 < 5; // true 4 < 3; // false

8 — Less Than Or Equal (<=)

The <= operator checks the left operand against the right operand and returns true if the left operand is less than or equal to the right operand.

4 <= 3; // false 4 <= 4; // true 4 <= 4.005; // true

Creating A Digital blood-pressure monitoring app

Blood pressure is measured in millimeters of mercury (mmHg). If you see a figure like "120/80mmHg", it means the systolic pressure over the diastolic pressure.

A high range in blood pressure can indicate hypertension, so in this example, you are going to build an app that helps to indicate abnormalities, if any.

This app is quite basic so it only takes the "systolic" pressure into account.

Information

  • Low Systolic Pressure: less than 120mmHg
  • Normal Systolic Pressure: 120 mmHg
  • Pre-Hypertension: 120–139 mmHg
  • Hypertension: greater than 140 mmHg

Source: CDC.gov

To build this app you will need to write logic to return a statement based on the given information:

function digitalBP(num) { if (num < 120) { console.log("Low Blood Pressure"); } else if (num == 120) { console.log("Normal Blood Pressure"); } else if (num > 120 && num < 140) { console.log("Pre-Hypertension"); } else { console.log("Hypertension"); } } digitalBP(110); // "Low Blood Pressure" digitalBP(120); // "Normal Blood Pressure" digitalBP(139); // Pre-Hypertension digitalBP(140); // Hypertension digitalBP(160); // Hypertension

Conclusion

You have:

  • A good understanding of Comparison Operators
  • Leaned How to use the Comparison Operators in Javascript
  • Built an app to indicate the different states of blood pressure

Recent Posts

Image for Coin Flip Simulator With Javascript And CSS Animations

Coin Flip Simulator With Javascript And CSS Animations

In this tutorial, you will learn to build a small app to toss a coin using HTML, CSS, and Javascript. The possible outcomes after flipping a coin are either "Head" or "tail". The probability of getting head or tail is 50%.

Image for Use Math.PI To Calculate Area And Circumference Of A Circle

Use Math.PI To Calculate Area And Circumference Of A Circle

The "Math.PI" property returns the PI "π" constant, approximately equal to 3.14159. For example, you can calculate the circumference and surface area of a circle using "Math.PI".

Image for Check If A Function Exists Before Calling With The typeof Operator

Check If A Function Exists Before Calling With The typeof Operator

If you are sharing scripts from different modules or you have a large codebase, you can use the `typeof` operator to check if a function exists.

Image for Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

The "toggle()" is a method of the "DOMTokenList". It removes something like a "class" name from the list, and returns "false". If the "class" name does not exist, it will add it to the list and return "true".