DeveloperBreeze

Comparison and Logical Operators

javascript
#JavaScript tutorial #comparison operators #logical operators #equality #strict equality #relational operators #greater than #less than #AND operator #OR operator #NOT operator #JavaScript conditions #boolean logic #decision making #programming basics

Section 2.3: Operators

Tutorial 2.3.2: Comparison and Logical Operators

Comparison and Logical Operators in JavaScript

Comparison and logical operators allow you to compare values and perform logical operations. They are fundamental for decision-making in JavaScript, such as in if statements and loops.

1. Comparison Operators

Comparison operators compare two values and return a boolean (true or false).

OperatorSymbolDescriptionExampleResult
Equal to==Checks if values are equal5 == '5'true
Strict Equal to===Checks if values and types are equal5 === '5'false
Not Equal to!=Checks if values are not equal5 != '5'false
Strict Not Equal to!==Checks if values and types are not equal5 !== '5'true
Greater than>Checks if left is greater than right10 > 5true
Greater than or Equal to>=Checks if left is greater than or equal to right10 >= 10true
Less than<Checks if left is less than right3 < 8true
Less than or Equal to<=Checks if left is less than or equal to right3 <= 3true

Examples of Comparison Operators

console.log(5 == "5"); // true (type coercion)
console.log(5 === "5"); // false (no type coercion)
console.log(10 > 7); // true
console.log(4 <= 4); // true

2. Logical Operators

Logical operators combine multiple conditions or values.

OperatorSymbolDescriptionExampleResult
AND&&Returns true if both conditions are truetrue && falsefalse
OR||Returns true if at least one condition is truetrue || falsetrue
NOT!Reverses the boolean value!truefalse

Examples of Logical Operators

// AND operator
console.log(true && true); // true
console.log(true && false); // false

// OR operator
console.log(false || true); // true
console.log(false || false); // false

// NOT operator
console.log(!true); // false
console.log(!false); // true

Combining Comparison and Logical Operators

Use comparison and logical operators together for complex conditions.

Example:

let age = 20;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Access granted.");
} else {
  console.log("Access denied.");
}
// Output: "Access granted."

Common Errors

  1. Confusing == with ===:
  • == performs type coercion.
  • === ensures both value and type match.
  1. Using && or || incorrectly:
  • Logical operators evaluate left to right; ensure your conditions are correct.

Exercise

  1. Check if a number is greater than 10 and even.
  2. Write a condition to determine if a user can log in based on the following:
  • The user must be logged in (isLoggedIn is true).
  • The user's account must not be suspended (isSuspended is false).

Example:

let number = 12;
if (number > 10 && number % 2 === 0) {
  console.log("The number is greater than 10 and even.");
}

let isLoggedIn = true;
let isSuspended = false;

if (isLoggedIn && !isSuspended) {
  console.log("User can log in.");
} else {
  console.log("Access denied.");
}

Continue Reading

Handpicked posts just for you — based on your current read.

Arithmetic Operators 

    console.log(-10 % 3); // -1
  • Create variables a and b with values 12 and 4.
  • Perform all arithmetic operations and log the results.

Dec 11, 2024 Tutorial

Non-Primitive Data Types (Objects, Arrays, and Functions) 

  let fruits = ["apple", "banana", "cherry"];
  • Accessing Elements:

Dec 11, 2024 Tutorial

Primitive Data Types

Used for very large integers beyond the safe range of number.

  • Syntax: Append n to the end of an integer.
  • Example:

Dec 11, 2024 Tutorial

Variables and Constants 

let greeting;
console.log(greeting); // undefined
  • Use let for variables whose value may change.
  • Example:

Dec 10, 2024 Tutorial

Hello World and Comments 

     console.log(Hello, World!);
  • Correct:

Dec 10, 2024 Tutorial

How to Create a Chrome Extension for Automating Tweets on X (Twitter)

  • How to structure a Chrome extension project.
  • The roles of the manifest, background script, content script, and popup.
  • How to interact with web pages programmatically.

You can now modify and expand this extension to include features like scheduling specific tweets, logging analytics, or integrating with other social media platforms.

Dec 10, 2024 Tutorial

JavaScript Tutorial for Absolute Beginners

  • Open index.html in your web browser.
  • Right-click and select "Inspect" or press Ctrl + Shift + I to open the Developer Tools.
  • Go to the "Console" tab to see the message.

Variables are used to store data that can be reused throughout your code. In JavaScript, you can declare variables using var, let, or const.

Sep 02, 2024 Tutorial

Creating a Dropdown Menu with JavaScript 

// script.js
document.addEventListener('DOMContentLoaded', function () {
  const dropdownToggle = document.querySelector('.dropdown-toggle');
  const dropdownMenu = document.querySelector('.dropdown-menu');

  dropdownToggle.addEventListener('click', function (event) {
    event.preventDefault();
    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
  });

  document.addEventListener('click', function (event) {
    if (!dropdownToggle.contains(event.target) && !dropdownMenu.contains(event.target)) {
      dropdownMenu.style.display = 'none';
    }
  });
});

In this script:

Sep 02, 2024 Tutorial

Understanding JavaScript Classes

JavaScript has evolved significantly over the years, and one of the key features introduced in ECMAScript 6 (ES6) is the concept of classes. While JavaScript has always been an object-oriented language, the introduction of classes brought a more familiar syntax for developers coming from other object-oriented programming languages like Java, Python, or C#. In this tutorial, we'll explore JavaScript classes in depth, including how they work, why they're useful, and how to effectively use them in your code.

This tutorial assumes a basic understanding of JavaScript, including functions, objects, and inheritance. If you're new to these concepts, it may be helpful to review them before proceeding.

Sep 02, 2024 Tutorial

Asynchronous JavaScript: A Beginner's Guide 

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched");
    }, 2000);
}

console.log("Start");
fetchData((message) => {
    console.log(message);
});
console.log("End");
Start
End
Data fetched

Aug 30, 2024 Tutorial

Understanding the DOM in JavaScript: A Comprehensive Guide

Removing elements is just as straightforward as adding them. Use the removeChild or remove method.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement); // Removes childElement from parentElement

Aug 30, 2024 Tutorial

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!