Operators and Expressions in JavaScript

Objective

In this tutorial, you will learn about operators in JavaScript, how to perform calculations, and how to use expressions to manipulate data.

---

Step 1: What are Operators?

Operators are symbols that perform operations on variables and values. JavaScript has several types of operators, including arithmetic, assignment, comparison, and logical operators.

Step 2: Arithmetic Operators

Arithmetic operators are used to perform basic math operations like addition, subtraction, multiplication, and division.

Common Arithmetic Operators:

• + (Addition): Adds two numbers.
• - (Subtraction): Subtracts one number from another.
• * (Multiplication): Multiplies two numbers.
• / (Division): Divides one number by another.
• % (Modulus): Returns the remainder of division.
• ** (Exponentiation): Raises the first number to the power of the second.

Example:

let a = 10;
let b = 5;

let sum = a + b;          // 15
let difference = a - b;   // 5
let product = a * b;      // 50
let quotient = a / b;     // 2
let remainder = a % b;    // 0
let power = a ** b;       // 100000

Step 3: Assignment Operators

Assignment operators are used to assign values to variables.

Common Assignment Operators:

• = (Assignment): Assigns the right value to the left variable.
• += (Addition Assignment): Adds the right value to the left variable and assigns the result to the left variable.
• -= (Subtraction Assignment): Subtracts the right value from the left variable and assigns the result to the left variable.

Example:

let c = 20;

c += 10;   // c = c + 10, so c is now 30
c -= 5;    // c = c - 5, so c is now 25

Step 4: Comparison Operators

Comparison operators are used to compare two values. They return a boolean (true or false).

Common Comparison Operators:

• == (Equal to): Returns true if two values are equal.
• != (Not equal to): Returns true if two values are not equal.
• === (Strict equal to): Returns true if two values are equal and of the same type.
• !== (Strict not equal to): Returns true if two values are not equal or not of the same type.
• > (Greater than): Returns true if the left value is greater than the right.
• < (Less than): Returns true if the left value is less than the right.
• >= (Greater than or equal to): Returns true if the left value is greater than or equal to the right.
• <= (Less than or equal to): Returns true if the left value is less than or equal to the right.

Example:

let x = 8;
let y = 10;

let isEqual = (x == y);   // false
let isNotEqual = (x != y); // true
let isGreaterThan = (x > y);  // false
let isLessThan = (x < y);    // true

Step 5: Logical Operators

Logical operators are used to combine multiple comparison expressions.

Common Logical Operators:

• && (AND): Returns true if both expressions are true.
• || (OR): Returns true if at least one expression is true.
• ! (NOT): Returns true if the expression is false.

Example:

let p = true;
let q = false;

let andResult = p && q;  // false (both need to be true)
let orResult = p || q;   // true (at least one is true)
let notResult = !p;      // false (negation of true)

Step 6: Writing and Executing Code

JavaScript Code:

Create a file named operators.js and paste the following JavaScript code:

// Arithmetic operations
let a = 10;
let b = 5;

let sum = a + b;
let product = a * b;

console.log("a: " + a);
console.log("b: " + b);
console.log("Sum: " + sum);
console.log("Product: " + product);

// Comparison operations
let isEqual = (a == b);
let isGreaterThan = (a > b);

console.log("Is equal? " + isEqual);
console.log("Is greater than? " + isGreaterThan);

// Logical operations
let p = true;
let q = false;

let andResult = p && q;
let orResult = p || q;

console.log("AND result: " + andResult);
console.log("OR result: " + orResult);

// Displaying values on the page
document.getElementById("original_values").textContent = "a: " + a + ", b: " + b;
document.getElementById("arithmetic").textContent = "Sum: " + sum + ", Product: " + product;
document.getElementById("comparison").textContent = "Is equal? " + isEqual + ", Is greater than? " + isGreaterThan;
document.getElementById("logical").textContent = "AND result: " + andResult + ", OR result: " + orResult;

HTML Code:

Create a file named operators.html and paste the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Operators</title>
</head>
<body>
    <h1>JavaScript Operators and Expressions</h1>
    <p id="original_values"></p>
    <p id="arithmetic"></p>
    <p id="comparison"></p>
    <p id="logical"></p>

    <script src="3_operators.js"></script>
</body>
</html>

Step 7: Save and Open in Browser

• Save both operators.js and operators.html files.
• Open operators.html in your browser.
• You should see the results of the arithmetic, comparison, and logical operations displayed directly on the webpage.
• Open the browser console (Right-click on the page, choose “Inspect”, then go to the “Console” tab) to see the output of console.log().

Explanation of the Code:

• Arithmetic: Performs addition and multiplication on the variables a and b and displays the results.
• Comparison: Checks if a is equal to or greater than b and displays the results.
• Logical: Evaluates logical expressions using && and || and displays the results.

Step 8: Experimenting

• Try Different Values: Change the values of a and b and observe how it affects the arithmetic, comparison, and logical results.
• Add More Operators: Experiment with other operators like subtraction, division, and modulus, and display their results.

Step 9: Summary

• You learned about different types of operators in JavaScript: arithmetic, assignment, comparison, and logical.
• You practiced using these operators to perform calculations, make comparisons, and combine logical expressions.
• You displayed the results of these operations on a webpage and in the console.