Skip to content

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

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;

4 == "4"; // true
4 === "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;

4 != "4"; // false
4 !== "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