Operators In JavaScript: Comparison and Logical Operators In JavaScript

Muhammad BilalMuhammad Bilal
4 min read

Comparison Operators in JavaScript

JavaScript provides several comparison operators to compare values and evaluate logical expressions. These operators return either true or false based on the comparison result. Here's a breakdown of the most common ones:

Equality (==):

It returns true if the values are equal, even if they are of different types.

For example:

let a = 2;
let b = "2";
if (a == b) {
    console.log(true);
}else{
    console.log(false);
}
// Output: true 
// Because == operator doesn't check the type strictly

Strict Equality (===):

It returns true only if the values are equal and the datatypes are also equal.

For example:

let a = 2;
let b = "2";
if (a === b) {
    console.log(true);
}else{
    console.log(false);
}
// Output: false 
// Because === operator check the type strictly.

Inequality Operator (!=):

It returns true if the values are not equal, regardless of type.

For example:

let a = 3;
let b = "2";
if (a != b) {
    console.log(true);
}else{
    console.log(false);
}
// Output: true

Strict inequality (!==):

It returns true only if the values are not equal or of different types.

For example:

let a = 3;
let b = "2";
if (a !== b) {
    console.log(true);
}else{
    console.log(false);
}
// Output: true

Comparison:

Less than (<):

It returns true if the left operand is less than the right operand.

For example:

let a = 2;
let b = 3;
if (a < b) {
    console.log(true);
}else{
    console.log(false);
}
// Output: true    // Because 2 isless than 3

Less than or equal to (<=):

It returns true if the left operand is less than or equal to the right operand.

For example:

let a = 3;
let b = 3;
if (a <= b) {
    console.log(true);
}else{
    console.log(false);
}
// Output: true     // Because they are equal

Greater than (>):

It returns true if the left operand is greater than the right operand.

For example:

    let a = 4;
    let b = 3;
    if (a > b) {
        console.log(true);
    }else{
        console.log(false);
    }
    // Output: true

Greater than or equal to (>=):

It returns true if the left operand is greater than or equal to the right operand.

For example:

    let a = 3;
    let b = 2;
    if (a >= b) {
        console.log(true);
    }else{
        console.log(false);
    }
    // Output: true

Note ๐ŸŽ“:

When comparing strings, JavaScript converts them to numbers if possible. For example, '10' > 5 is true.

Comparison operators can be chained. For example, 1 < 2 < 3 is true.

The comparison operators are used in conditional statements like if and while to control program flow.

Logical Operators in JavaScript

JavaScript also offers a set of logical operators to combine multiple conditions and create more complex logical expressions. These operators help build conditional statements, control program flow and handle different situations based on various factors. Let's explore the main ones:

AND Operator (&&):

This operator returns true only if both operands are true. Otherwise, it returns false.

Example:

let raining = true;  // Operand 1
let cold = false;  // Operand 2
if (raining && cold) {
 console.log("Stay home, it's both rainy and cold!");
} else {
 console.log("Both Conditions are not true!");
}
// Output: Both Conditions are not true!

OR Operator (||):

This operator returnstrue if at least one operand is true. It only returnsfalse if both operands are false.

Examples:

If one is true:

let money = false; // Operand 1
let card = true; // Operand 2
if (money || card) {
  console.log("One is true so, You can buy that coffee!");
} else {
  console.log("Better luck next time...");
}
// Output: One is true so, You can buy that coffee!

If both are true:

let money1 = true; // Operand 1
let card1 = true; // Operand 2
if (money || card) {
  console.log("Both are true so, You can buy that coffee!");
} else {
  console.log("Better luck next time...");
}
// Output: Both are true so, You can buy that coffee!

If both are false:

let hasMoney = false; // Operand 1
let hasCard = false; // Operand 2
if (hasMoney || hasCard) {
  console.log("You can buy that coffee!");
} else {
  console.log("Both Operands are false so, Better luck next time...");
}
// Output: Both Operands are false so, Better luck next time...

NOT (!):

This operator flips the logical value of its operand. true becomesfalse, and false becomes true.

Examples:

let isLoggedIn = false;
if (!isLoggedIn) {
 console.log("You are LoggedIn!");
} else {
 console.log("Go back!");
}
// Output: You are LoggedIn!
let isLoggedOut = true;
if (!isLoggedOut) {
 console.log("You are LoggedOut!");
} else {
 console.log("Go back!");
}
// Output: Go back!

Nullish Coalescing (??): Introduced in ES2020, this operator returns the first operand if it's not null or undefined. Otherwise, it returns the second operand.

Example:

let userName = null;
let defaultUserName = "Muhammad Bilal";
let actualUserName = userName ?? defaultUserName;
console.log(`Welcome, ${actualUserName}`);
 // Output: Welcome, Muhammad Bilal
0
Subscribe to my newsletter

Read articles from Muhammad Bilal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Muhammad Bilal
Muhammad Bilal

With a passion for creating seamless and visually appealing web experiences, I am Muhammad Bilal, a dedicated front-end developer committed to transforming innovative ideas into user-friendly digital solutions. With a solid foundation in HTML, CSS, and JavaScript, I specialize in crafting responsive and intuitive websites that captivate users and elevate brands. ๐Ÿ“ˆ Professional Experience: In my two years of experience in front-end development, I have had the privilege of collaborating with diverse teams and clients, translating their visions into engaging online platforms. ๐Ÿ”Š Skills: Technologies: HTML5, CSS3, JavaScript, WordPress Responsive Design: Bootstrap, Tailwind CSS, Flexbox, and CSS Grid Version Control: Git, GitHub ๐Ÿ–ฅ Projects: I have successfully contributed to projects where my focus on performance optimization and attention to detail played a crucial role in delivering high-quality user interfaces. โœจ Continuous Learning: In the fast-paced world of technology, I am committed to staying ahead of the curve. Regularly exploring new tools and methodologies, I am dedicated to enhancing my skills and embracing emerging trends to provide the best possible user experience. ๐ŸŽ“ Education: I hold a BSc degree in Software Engineering from Virtual University, where I gained both technical skills and knowledge. ๐Ÿ‘ฅ Let's Connect: I am always open to new opportunities, collaborations, and discussions about the exciting possibilities in front-end development. Feel free to reach out via LinkedIn, Instagram, Facebook, Twitter, or professional email.