JavaScript Operators: The Basics You Need to Know

Think back to the last time you used an app. Maybe you added an item to a digital cart, checked if your password was correct, or saw a "Discount Applied" message.

How did the app "know" to add those prices together? How did it "decide" that your password matched the one in the database?

The answer is Operators.

If Variables are the storage boxes that hold your data, then Operators are the tools, engines, and magic wands that actually do something with that data. Without them, your code would just be a collection of static information—like a kitchen full of ingredients but no chef to cook them!

In this guide, we are going to break down the four essential "toolkits" every JavaScript developer needs:

1. Arithmetic Operators: For the math geeks (and those who hate math but love calculators).

2. Comparison Operators: The "judges" that decide if things are equal or different.

3. Logical Operators: The "brain" that handles multiple conditions at once.

4. Assignment Operators: The shortcuts that make your code clean and fast.

Ready to turn your static data into a dynamic program? Let’s grab our tools and dive in!

Arithmetic Operators: The Basic Calculator

This is the easiest one, we have been studying for the school days.

• + (addition): To add numbers or to concatenate the strings

• - (Subtraction): To find the difference between the numbers

• * (Multiplication): To get the product of the value

• / (Division): To get the quotient of the numbers

• % (Modulus): Gives the remainder. This is a little bit tricky for everyone. let's take an example to understand. You have 10 slices of pizza and you have to divide among 3 of your friends. 1 slice of pizza will be left (The remainder) that will be your answer in %. check the code to understand more.

let sum = 2 + 3 // output: 5
let diff = 3 - 2 // output: 1
let product = 3 * 2 // output: 6
let quotient = 5 / 2 // output: 2
let remainder = 5 % 2 // output: 1

Comparison Operator: Comparing Value (The Judge)

Comparison operator checks the relationship of the value, whether it is equal to, greater than, or less than. It always returns a Boolean value, i.e., True or False

• >(Greater than) & > (less than): to check which value is bigger.

• "==" vs "===": This is where most programmers get stuck!

  • "==" (loose): It will only check the value. 5 == "5" is True.

  • "===" (strict): It will check both the type and the value. 5 === "5" is False (Because one is a number and the other one is a string).

• >= (Greater than or equal to) & <= (Less than or equal to): It checks which value is bigger or equal to.

let a = 5;
let b = 8;

console.log(a > b) // False
console.log(a < b) // True

let c = 10 // Number
let d = "10" // String

console.log(a == b) // True (Checks only the value)
console.log(a === b) // False (Checks both the value and the Type)

Tip : Use "===" strict comparison (Best Practice)

Input Pair	==	===	INSIGHT
5 == "5"	True	False	"==" checks only the value
1 == true	True	False	Value of 1 is "true"
0 == false	True	False	False becomes 0
null == undefined	True	False	null is object in JS
[ ] == 0	True	False	Array --> String --> Number
NaN == NaN	False	False	NaN is never equal to NaN
"abc" === "abc"	True	True	Same value & same type

Tip: NaN === NaN ---> False

Because two different NaN values may have originated from two entirely different invalid operations (e.g., sqrt(-1) and log(-1)), they are not necessarily the "same" from a mathematical standpoint, so declaring them equal by default would be incorrect.

Logical Operators: Decision Making (The Brain)

When you have multiple conditions to check, we use a logical operator

• && (AND): when you want both conditions to be true. (Bread and butter are both needed, then I will do the breakfast)

• || (OR): When you want any one condition to be true. (Tea or coffee)

• ! (Not): Reverse Logic

A	B	A AND B	A OR B	!A
True	True	True	False	False
True	False	False	True	False
False	True	False	True	True
False	False	False	True	True

AND (&&) operator Example

let hasTicket = true;
let age = 20;

// Both must be true
let canEnter = (hasTicket === true) && (age >= 18); 

console.log("Can enter club:", canEnter); // Output: true

OR (||) operator Example

let hasCash = false;
let hasCard = true;

// Only one needs to be true
let canBuyPopcorn = hasCash || hasCard;

console.log("Can buy popcorn:", canBuyPopcorn); // Output: true

NOT (!) operator example

let isRaining = true;

// This says: If it is NOT raining...
if (!isRaining) {
    console.log("Let's go for a walk!");
} else {
    console.log("Stay home, it's raining!"); // Output: This will run
}

Assignment Operators: Updating Value (The Shortcut)

Using "=" just assigns the value, but using shortcuts makes the code clean.

• += (Add and Assign): x+=5 means x = x + 5

• -= (Subtract and Assign): x-=5 means x = x - 5

• *= (Multiply and Assign): x*=5 means x = x * 5

• /= (Divide and Assign): x/=5 means x = x / 5

Assignment: Time to Practice!

Reader ko ye task dein:

1. Do variables lein (num1 = 20, num2 = 10) aur unka Remainder (%) console mein print karein.

2. Check karein: Kya "10" == 10 true hai? Aur kya "10" === 10 true hai?

3. Ek condition likhein jahan age > 18 ho AND hasVoterId true ho.

Conclusion: From Static Data to Dynamic Logic! 🚀

We started this journey by looking at operators as simple math symbols, but as we’ve seen, they are so much more. They are the decision-makers of your code.

Whether you are calculating a discount with Arithmetic Operators, validating a user's password with Comparison Operators, or building complex "if-this-and-that" rules with Logical Operators, you are now equipped with the tools to make your code "think."

Key Takeaways to Remember:

• Precision Matters: Always prefer === over == to avoid unexpected bugs.

• Logic is Power: Use && and || to handle real-world scenarios where one condition isn't enough.

• Write Cleaner Code: Use Assignment shortcuts like += to keep your scripts sleek and professional.

Your Turn!
Head over to the Assignment section above and try out the challenges. If you hit a wall or get a confusing result in your console, don’t panic—drop a comment below, and let's figure it out together.

Happy Coding! ✨