Understanding JavaScript Operators : A Comprehensive Guide - MERN STACK Series

JavaScript operators are fundamental components of the language, enabling developers to perform various actions on data. From basic arithmetic calculations to complex logical operations, operators play a crucial role in programming. In this blog, we'll explore the different types of operators in JavaScript, along with code examples and real-world use cases.

Arithmetic Operators:

• Addition (+): Adds two operands.
• Subtraction (-): Subtracts the right operand from the left operand.
• Multiplication (*): Multiplies two operands.
• Division (/): Divides the left operand by the right operand.
• Modulus (%): Returns the remainder of the division of the left operand by the right operand.
• Exponentiation (**): Raises the left operand to the power of the right operand.

// Declare two variables
let num1 = 10;
let num2 = 3;

// Addition
let addition = num1 + num2; // 10 + 3 = 13

// Subtraction
let subtraction = num1 - num2; // 10 - 3 = 7

// Multiplication
let multiplication = num1 * num2; // 10 * 3 = 30

// Division
let division = num1 / num2; // 10 / 3 = 3.333...

// Modulus
let modulus = num1 % num2; // 10 % 3 = 1 (remainder of 10 divided by 3)

// Exponentiation
let exponentiation = num1 ** num2; // 10 ** 3 = 1000 (10 raised to the power of 3)

// Output the results
console.log("Addition:", addition);
console.log("Subtraction:", subtraction);
console.log("Multiplication:", multiplication);
console.log("Division:", division);
console.log("Modulus:", modulus);
console.log("Exponentiation:", exponentiation);

Real-world example: Calculating the total price of items in a shopping cart.

Assignment Operators:

• Assignment (=): Assigns a value to a variable.
• Addition assignment (+=): Adds the value of the right operand to the value of the left operand and assigns the result to the left operand.
• Subtraction assignment (-=): Subtracts the value of the right operand from the value of the left operand and assigns the result to the left operand.
• Multiplication assignment (*=): Multiplies the value of the left operand by the value of the right operand and assigns the result to the left operand.
• Division assignment (/=): Divides the value of the left operand by the value of the right operand and assigns the result to the left operand.
• Modulus assignment (%=): Computes the remainder of dividing the value of the left operand by the value of the right operand and assigns the result to the left operand.
• Exponentiation assignment (**=): Raises the value of the left operand to the power of the value of the right operand and assigns the result to the left operand.

let num = 10;

// Assignment
let result1 = num; // result1 = 10

// Addition assignment
result1 += 5; // result1 = result1 + 5 = 10 + 5 = 15

// Subtraction assignment
result1 -= 3; // result1 = result1 - 3 = 15 - 3 = 12

// Multiplication assignment
result1 *= 2; // result1 = result1 * 2 = 12 * 2 = 24

// Division assignment
result1 /= 4; // result1 = result1 / 4 = 24 / 4 = 6

// Modulus assignment
result1 %= 5; // result1 = result1 % 5 = 6 % 5 = 1

// Exponentiation assignment
result1 **= 3; // result1 = result1 ** 3 = 1 ** 3 = 1

console.log("Result after all assignments:", result1);

Real-world example: Updating user scores in a gaming application.

Comparison Operators:

• Equality (==): Returns true if the operands are equal.
• Strict equality (===): Returns true if the operands are equal and of the same type.
• Inequality (!=): Returns true if the operands are not equal.
• Strict inequality (!==): Returns true if the operands are not equal or not of the same type.
• Greater than (>): Returns true if the left operand is greater than the right operand.
• Less than (<): Returns true if the left operand is less than the right operand.
• Greater than or equal to (>=): Returns true if the left operand is greater than or equal to the right operand.
• Less than or equal to (<=): Returns true if the left operand is less than or equal to the right operand.

let x = 10;
let y = 5;

// Equality
console.log("Equality:", x == y); // false

// Strict equality
console.log("Strict equality:", x === "10"); // false (type conversion is not done)

// Inequality
console.log("Inequality:", x != y); // true

// Strict inequality
console.log("Strict inequality:", x !== "10"); // true (type conversion is not done)

// Greater than
console.log("Greater than:", x > y); // true

// Less than
console.log("Less than:", x < y); // false

// Greater than or equal to
console.log("Greater than or equal to:", x >= y); // true

// Less than or equal to
console.log("Less than or equal to:", x <= y); // false

Real-world example: Validating user input in a form.

Logical Operators:

• Logical AND (&&): Returns true if both operands are true.
• Logical OR (||): Returns true if at least one of the operands is true.
• Logical NOT (!): Returns the opposite boolean value of the operand.

let isAdult = true;
let hasLicense = false;
let age = null;

// Logical AND
let canDrive = isAdult && hasLicense; // true && false = false

// Logical OR
let canVote = isAdult || hasLicense; // true || false = true

// Logical NOT
let isNotAdult = !isAdult; // !true = false

// Nullish Coalescing Operator
let userAge = age ?? 18; // If age is null or undefined, userAge will be assigned 18

// Conditional (Ternary) Operator
let canDrive1 = isAdult && hasLicense ? "Yes" : "No"; // If both conditions are true, canDrive is "Yes"; otherwise, it's "No"

console.log("Can Drive:", canDrive);
console.log("Can Vote:", canVote);
console.log("Is Not Adult:", isNotAdult);
console.log("User Age:", userAge);
console.log("Can Drive:", canDrive1); //yes or no

Real-world example: Implementing access control in an application.

Conclusion:
Understanding JavaScript operators is essential for any developer working with the language. Whether you're performing basic arithmetic operations or implementing complex logical conditions, operators empower you to manipulate data effectively. By mastering these operators and their applications, you'll enhance your ability to write efficient and concise JavaScript code.

Playground for Javascript
Playcode.io is an online code editor and playground that allows users to write, edit, and execute HTML, CSS, and JavaScript code.

🌟 Stay Connected! 🌟

Hey there, awesome reader! 👋 Want to stay updated with my latest insights,Follow me on social media!

🐦 📸 📘 💻 🌐 💼

Sadanand Gadwal