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