Hướng dẫn dùng comparisonoperator JavaScript


Comparison and Logical operators are used to test for true or false.


Comparison Operators

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Given that x = 5, the table below explains the comparison operators:



How Can it be Used

Comparison operators can be used in conditional statements to compare values and take action depending on the result:

if (age < 18) text = "Too young to buy alcohol";

You will learn more about the use of conditional statements in the next chapter of this tutorial.


Logical Operators

Logical operators are used to determine the logic between variables or values.

Given that x = 6 and y = 3, the table below explains the logical operators:

OperatorDescriptionExampleTry it
&& and (x < 10 && y > 1) is true Try it »
|| or (x == 5 || y == 5) is false Try it »
! not !(x == y) is true Try it »


Conditional (Ternary) Operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax

variablename = (condition) ? value1:value2 

Example

If the variable age is a value below 18, the value of the variable voteable will be "Too young", otherwise the value of voteable will be "Old enough".


Comparing Different Types

Comparing data of different types may give unexpected results.

When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to 0. A non-numeric string converts to NaN which is always false.

CaseValueTry
2 < 12 true Try it »
2 < "12" true Try it »
2 < "John" false Try it »
2 > "John" false Try it »
2 == "John" false Try it »
"2" < "12" false Try it »
"2" > "12" true Try it »
"2" == "12" false Try it »

When comparing two strings, "2" will be greater than "12", because (alphabetically) 1 is less than 2.

To secure a proper result, variables should be converted to the proper type before comparison:

age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}

Try it Yourself »


The Nullish Coalescing Operator (??)

The ?? operator returns the first argument if it is null or undefined. Otherwise it returns the second.

Example

let name = null;
let text = "missing";
let result = name ?? text;

Try it Yourself »

The nullish operator is supported in all browsers since March 2020:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020


The Optional Chaining Operator (?.)

The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).

Example

// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;

Try it Yourself »

The optional chaining operator is supported in all browsers since March 2020:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020





Comparison and Logical operators are used to test for true or false.

Nội dung chính Show

  • Comparison Operators
  • How Can it be Used
  • Logical Operators
  • Conditional (Ternary) Operator
  • Comparing Different Types
  • JavaScript Comparison Operators
  • Example 1: Equal to Operator
  • Example 2: Not Equal to Operator
  • Example 3: Strict Equal to Operator
  • Example 4: Strict Not Equal to Operator
  • Example 5: Greater than Operator
  • Example 6: Greater than or Equal to Operator
  • Example 7: Less than Operator
  • Example 8: Less than or Equal to Operator
  • JavaScript Logical Operators
  • Example 9: Logical AND Operator
  • Example 10: Logical OR Operator
  • Example 11: Logical NOT Operator
  • Which is the comparison operator?
  • What is comparison operator with example?
  • What is === in JavaScript?
  • What is a comparison operator in programming?


Comparison Operators

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Given that x = 5, the table below explains the comparison operators:



How Can it be Used

Comparison operators can be used in conditional statements to compare values and take action depending on the result:

if (age < 18) text = "Too young to buy alcohol";

You will learn more about the use of conditional statements in the next chapter of this tutorial.


Logical Operators

Logical operators are used to determine the logic between variables or values.

Given that x = 6 and y = 3, the table below explains the logical operators:

OperatorDescriptionExampleTry it
&& and (x < 10 && y > 1) is true Try it »
|| or (x == 5 || y == 5) is false Try it »
! not !(x == y) is true Try it »

Conditional (Ternary) Operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax

variablename = (condition) ? value1:value2 

Example

If the variable age is a value below 18, the value of the variable voteable will be "Too young", otherwise the value of voteable will be "Old enough".


Comparing Different Types

Comparing data of different types may give unexpected results.

When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to 0. A non-numeric string converts to NaN which is always false.

CaseValueTry
2 < 12 true Try it »
2 < "12" true Try it »
2 < "John" false Try it »
2 > "John" false Try it »
2 == "John" false Try it »
"2" < "12" false Try it »
"2" > "12" true Try it »
"2" == "12" false Try it »

When comparing two strings, "2" will be greater than "12", because (alphabetically) 1 is less than 2.

To secure a proper result, variables should be converted to the proper type before comparison:

age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}

Try it Yourself »


JavaScript Comparison Operators

Comparison operators compare two values and give back a boolean value: either true or false. Comparison operators are used in decision making and loops.

OperatorDescriptionExample
== Equal to: true if the operands are equal 5==5; //true
!= Not equal to: true if the operands are not equal 5!=5; //false
=== Strict equal to: true if the operands are equal and of the same type 5==='5'; //false
!== Strict not equal to: true if the operands are equal but of different type or not equal at all 5!=='5'; //true
> Greater than: true if the left operand is greater than the right operand 3>2; //true
>= Greater than or equal to: true if the left operand is greater than or equal to the right operand 3>=3; //true
< Less than: true if the left operand is less than the right operand 3<2; //false
<= Less than or equal to: true if the left operand is less than or equal to the right operand 2<=2; //true

Example 1: Equal to Operator

const a = 5, b = 2, c = 'hello';

// equal to operator
console.log(a == 5);     // true
console.log(b == '2');   // true
console.log(c == 'Hello');  // false

== evaluates to true if the operands are equal.

Note: In JavaScript, == is a comparison operator, whereas = is an assignment operator. If you mistakenly use = instead of ==, you might get unwanted result.


Example 2: Not Equal to Operator

const a = 3, b = 'hello';

// not equal operator
console.log(a != 2); // true
console.log(b != 'Hello'); // true

!= evaluates to true if the operands are not equal.


Example 3: Strict Equal to Operator

const a = 2;

// strict equal operator
console.log(a === 2); // true
console.log(a === '2'); // false

=== evaluates totrue if the operands are equal and of the same type. Here 2 and '2' are the same numbers but the data type is different. And === also checks for the data type while comparing.


Note: The difference between == and === is that:

== evaluates to true if the operands are equal, however, === evaluates to true only if the operands are equal and of the same type


Example 4: Strict Not Equal to Operator

 const a = 2, b = 'hello';

// strict not equal operator
console.log(a !== 2); // false
console.log(a !== '2'); // true
console.log(b !== 'Hello'); // true

!== evaluates to true if the operands are strictly not equal. It's the complete opposite of strictly equal ===.

In the above example, 2 !== '2' gives true. It's because their types are different even though they have the same value.


Example 5: Greater than Operator

const a = 3;

// greater than operator
console.log(a > 2); // true

> evaluates to true if the left operand is greater than the right operand.


Example 6: Greater than or Equal to Operator

const a = 3;

// greater than or equal operator
console.log(a >= 3); //true

>= evaluates to true if the left operand is greater than or equal to the right operand.


Example 7: Less than Operator

const a = 3, b = 2;

// less than operator
console.log(a < 2); // false
console.log(b < 3); // true

< evaluates to true if the left operand is less than the right operand.


Example 8: Less than or Equal to Operator

const a = 2;

// less than or equal operator
console.log(a <= 3) // true
console.log(a <= 2); // true

<= evaluates to true if the left operand is less than or equal to the right operand.


JavaScript Logical Operators

Logical operators perform logical operations: AND, OR and NOT.

OperatorDescriptionExample
&& Logical AND: true if both the operands/boolean values are true, else evaluates to false true && false; // false
|| Logical OR: true if either of the operands/boolean values is true. evaluates to false if both are false true || false; // true
! Logical NOT: true if the operand is false and vice-versa. !true; // false

Example 9: Logical AND Operator

const a = true, b = false;
const c = 4;

// logical AND
console.log(a && a); // true
console.log(a && b);  // false

console.log((c > 2) && (c < 2)); // false

&& evaluates to true if both the operands are true, else evaluates to false.

Note: You can also use logical operators with numbers. In JavaScript, 0 is false and all non-zero values are true.


Example 10: Logical OR Operator

const a = true, b = false, c = 4;


// logical OR
console.log(a || b); // true
console.log(b || b); // false
console.log((c>2) || (c<2)); // true

|| evaluates to true if either of the operands is true. If both operands are false, the result is false.


Example 11: Logical NOT Operator

const a = true, b = false;

// logical NOT
console.log(!a); // false
console.log(!b); // true

! evaluates to true if the operand is false and vice-versa.

Which is the comparison operator?

Comparison operators can compare numbers or strings and perform evaluations. Expressions that use comparison operators do not return a number value as do arithmetic expressions. Comparison expressions return either 1 , which represents true, or 0 , which represents false.

What is comparison operator with example?

If either of the operands is a string value, then a string comparison is used. Enclose strings in quotes ("string"). Caution! The == operator is a comparison operator. ... .

What is === in JavaScript?

The strict equality operator ( === ) checks whether its two operands are equal, returning a Boolean result. Unlike the equality operator, the strict equality operator always considers operands of different types to be different.

What is a comparison operator in programming?

In computer programming, comparison operators are used in conditional expressions to determine which block of code executes, thus controlling the program flow. Comparison operators compare two values in an expression that resolves to a value of true or false.