JavaScript Comparison

JavaScript provides various comparison operators that allow for the evaluation of two values. These operators assess the values against each other and yield a Boolean outcome, which can either be true or false. Such operators play a crucial role in both decision-making processes and iterative constructs within JavaScript programs.

In the realm of programming languages, operators serve the purpose of executing particular mathematical or logical tasks, enabling actions to be carried out and yielding the desired results. Various programming languages, including C, C++, Java, Python, among others, incorporate these operators. They can be utilized to evaluate logical operations and verify conditions.

In this segment, we will examine the comparison and logical operators that JavaScript offers, along with illustrative examples. Additionally, we will explore several examples to ascertain output based on conditions and to highlight the distinctions between various values.

List of Comparison Operators in JavaScript

Below is a compilation of the comparison operators that are available in JavaScript:

Note: The output of these will always be either true or false based on the assigned variable value. We will illustrate this in the examples sections of this article.

Ternary (Conditional) Operator

JavaScript includes a conditional operator, referred to as the ternary operator, which determines the output based on the evaluation of a condition. This operator is denoted by the "?" symbol.

The structure of the ternary operator in JavaScript is as follows:

Variable_name = (condition) ? value1:value2

Let’s delve into a comprehensive examination of these operators through the subsequent examples:

Example1: Equal to operator

The equality operator is utilized to determine if two values are identical. Take a look at the example provided below:

function myFunction(){

  const a=3;

  console.warn(a==3)

  }

Output:

In the same manner, when we evaluate the example provided below, it will yield a result of false:

function myFunction(){

  const a=3;

  console.warn(a==5)

  }

Output:

Example2: Equal Value and Types (Strict Equal to)

The "===" operator checks both the value and the data types of the variables involved in the comparison. It yields true only when both the value and data type are identical. For instance, consider the comparisons a===3 and a==="3". In the first scenario, it will return true if the value assigned to a is indeed 3. Conversely, in the second scenario, it will produce false since the data types differ.

Consider the below example:

function myFunction(){

  const a=3;

  console.warn(a===3)

  }

Output:

Now, check with string values:

function myFunction(){

  const a=3;

  console.warn(a==="3")

  }

Output:

The distinction between the equal to operator (==) and the strict equal to operator (===) lies in their evaluation methods. The equal to operator assesses only the value, while the strict equal to operator also verifies the data types. For instance, if we execute the example using the equal to operator, it will yield a result of true:

function myFunction(){

  const a=3;

  console.warn(a=="3")

  }

Output:

Example3: Not Equal to (!=)

The "not equal to" operator functions as the inverse of the "equal to" operator. It checks whether a given value does not match the specified value and returns a boolean result of either true or false based on that comparison.

function myFunction(){

  const a=3;

  console.warn(a!="5")

  }

Output:

Example4: Not Equal to and types (!==)

The not equal to and types operator (!==) performs a strict comparison between two values, taking into account both their values and their data types. If the values differ, it will yield a result of true. This operator functions as the inverse of the strict equal to operator.

Consider the below example:

function myFunction(){

 const a = 3, b = 'test';



// strict not equal operator

console.warn(a !== 3); // false

console.warn(a !== '3'); // true

console.warn(b !== 'Test'); // true

  }

Output:

false

true

true

Based on the output provided, it is evident that when the value and datatype are both identical, the function returns false. Conversely, if either the value or the datatype differs, it will return true.

Example5: The Greater than (>) and Less than (<) operators

The greater than (>) operators yield a true value if the value of the left operand exceeds that of the right operand; if not, they will return false.

The less than operator (<) operator returns true if the left operand value is less than the right operand; otherwise, it will return false.

Consider the below example:

function myFunction(){

  const a=3;

  console.warn(a==3)

  }

Output:

function myFunction(){

  const a=3;

  console.warn(a==5)

  }

From the above output, we can see that the greater than operator returns false when the value of a is less than b, and the less than operator returns true when the value of a is less than b.

Example6: Greater than or equal to (>=) and the less than or equal to operator (<=)

The greater than or equal to operator will yield a true result if at least one of the following two conditions holds true: it must either be greater than or equal to the specified value.

In the same manner, the less than or equal to operator will indicate whether the values are either less than or equal to one another.

Consider the below example:

function myFunction(){

 const a = 3, b = 3, c=5;



// strict not equal operator

console.warn(a>=b); // true

console.warn(a>=c); // false

console.warn(a<=c); // true

  }

Output:

true

false

true

Based on the output presented above, it is evident that when the specified conditions align, these operators yield results accordingly.

JavaScript Logical Operators

In JavaScript, there exist three fundamental logical operators: AND, OR, and NOT. These operators facilitate the execution of logical operations.

Example7: Logical And operator (&&)

The logical And operator serves to connect two conditions, yielding a true result exclusively when both conditions are true. Examine the example provided below:

function myFunction(){

 const a = 3, b = 3, c=5;

console.warn((a<=c) && (a===b) ); // true

console.warn((c>=a) && (c===5)); // true

console.warn((c>=b) && (c==4)); // false

  }

Output:

true

true

false

As indicated in the previous output, the logical And operator is linking two events, yielding a true result exclusively when both conditions hold true.

Example8: Logical OR operator (||)

The logical OR operator evaluates two conditions and yields true if at least one of those conditions is true. Take a look at the following example:

function myFunction(){

 const a = 3, b = 3, c=5;

console.warn((a<=c) || (a===b) ); // true

console.warn((c>=a) || (c===5)); // true

console.warn((c==b) || (c==4)); // false

  }

Output:

true

true

false

In the output provided above, it yields a false result for the third condition when none of the designated criteria are satisfied.

Example9: Logical NOT operator (!)

The Logical Not operator inverts the value of the existing operand. For instance, if the variable a holds the value true, applying the operator will yield false. Take a look at the following example:

function myFunction(){

 const a = true, b=false;

 console.warn(!a) // false

 console.warn(!b) //true

  }

Output:

false

true

The output from the previous example yields false when the input value is true, and conversely, it results in true when the input value is false.

JavaScript Ternary (Conditional) Operator

The JavaScript ternary operator, commonly referred to as the conditional operator, utilizes three operands. The first operand represents a condition and is succeeded by a question mark (?). Next, there is an expression that will be evaluated if the condition holds true, followed by a colon (:), which precedes another expression that will be executed if the condition is false. This operator serves as a concise substitute for an if-else statement.

Syntax:

Variable_name = (condition) ? value1:value2

Consider the below example:

Example10: Ternary Operator (?)

function myFunction(){

 const age=18, age2=17;

const person1= (age>=18? "Eligible to vote": "Not Eligible")

const person2= (age2>=18? "Eligible to vote": "Not Eligible")

console.log(person1)

console.log(person2)

  }

Output:

Eligible to vote

Not Eligible

From the output provided above, it is evident that when the condition evaluates to true, the first block of code will be executed; conversely, if the condition is false, the second block of code will take effect.

We have explored comparison operators as well as logical and ternary operators. These operators can be utilized in conjunction to formulate logical expressions. Typically, comparison operators are employed alongside various conditional and logical operators to construct conditional logic.

These operators can be employed for various purposes such as form validation, evaluating conditions, and enabling conditional rendering within JavaScript frameworks, among other applications.