Operators

Think about a calculator. You enter numbers, press +, -, or ×, and get an answer. Those buttons are operators.

In JavaScript, an operator is a symbol that performs an action on values. The values it works on are called operands.

let total = 10 + 5;
//          ↑  ↑  ↑
//   operand  operator  operand

Let us explore the different kinds of operators one by one.

1. Arithmetic Operators

These are used for maths.

Real example: calculating a restaurant bill

Key points:

• % gives the remainder after division. For example, 10 % 3 means 10 ÷ 3 = 3, with 1 left over.
• % is very useful to check even or odd numbers:

• Dividing by zero gives Infinity, not an error:

2. Integer Division

In some languages, 10 / 3 gives 3 (only the whole number). JavaScript does not do this. It always gives the full decimal answer.

So how do we get only the whole number part? We use the Math methods:

Real example: packing laddoos into boxes

Tip: For positive numbers, both methods give the same answer. For negative numbers, use Math.trunc() if you only want to remove the decimals.

3. Modulus with Negative Numbers

The % operator follows one simple rule:

The answer takes the sign of the first number (the number on the left).

Key points:

• Only the left side decides whether the answer is positive or negative.
• This is why -7 % 2 gives -1, not 1. Keep this in mind when checking odd numbers:

4. String Concatenation with +

The + operator has two jobs:

• With numbers, it adds.
• With strings, it joins (this is called concatenation).

If even one side is a string, + joins instead of adding:

JavaScript reads from left to right, so order matters:

A cleaner way: template literals

Instead of using many + signs, use backticks and ${ }:

5. Unary Operators

A unary operator works on only one value.

Unary +: a quick way to convert text into a number

Increment ++ and Decrement --

These add or subtract 1. But the position of ++ changes the result.

Prefix (++x): increase first, then use the value. Postfix (x++): use the value first, then increase.

Think of it like a queue at a ticket counter:

• Prefix: You get your token number updated before you are called.
• Postfix: You are called with your old token, and the number updates after.

6. Relational (Comparison) Operators

These compare two values and always return true or false.

Real example: voting eligibility

Key points:

• Always prefer === and !==. They do not convert types, so there are no surprises.
• When you compare strings, JavaScript checks them letter by letter, like a dictionary:

7. Logical Operators

These are used to combine conditions.

AND &&

OR ||

NOT !

Short-Circuiting: JavaScript Stops Early

Logical operators are smart. They stop checking as soon as the answer is clear.

• && stops at the first false value.
• || stops at the first true value.

They also return the actual value, not just true or false. This is used to set default values:

??: a safer way to set defaults

|| treats 0 and "" as empty. But sometimes 0 is a real value!

8. Bitwise and Non-Short-Circuit Operators

Computers store numbers as bits, which are 0s and 1s. Bitwise operators work directly on these bits.

For example, 5 in binary is 101 and 3 is 011.

How 5 & 3 works, bit by bit:

  101   (5)
& 011   (3)
-----
  001   (1)   → a bit is 1 only if both bits are 1

A simple use: checking even or odd

Shifting is a fast way to multiply or divide by 2:

Non-Short-Circuit Behaviour

&& and || stop early. But & and | always check both sides, even when the answer is already clear.

Key points:

• & and | return numbers (0 or 1), not true or false.
• For normal conditions, always use && and ||.
• Bitwise operators are mostly used in advanced tasks like graphics, permissions, and performance tricks. As a beginner, just know that they exist.

9. Assignment Operators

These store a value in a variable.

Real example: a wallet balance

Logical assignment operators set a value only when needed:

10. Ternary Operator

The ternary operator is a short form of if-else. It is the only operator that takes three operands.

condition ? valueIfTrue : valueIfFalse

The same code with if-else:

Key points:

• Great for simple, one-line decisions.
• Avoid nesting many ternaries. It makes the code hard to read.

// ❌ Hard to read
let grade = marks > 90 ? "A" : marks > 75 ? "B" : marks > 50 ? "C" : "D";

11. Operator Precedence and Associativity

When one line has many operators, which one runs first?

Precedence: who goes first

Just like the BODMAS rule in school maths, JavaScript has an order.

Common operators, from highest to lowest priority:

Associativity: which direction when the priority is the same

When two operators have the same priority, associativity decides the direction.

Left to right (most operators):

Right to left (**, assignment, and ternary):

Best tip: You don't need to memorise the whole table. Use brackets ( ) when in doubt. They make your code clear for everyone.

Key Takeaways

• Operators are symbols that perform actions on values, like maths, comparing, and combining conditions.
• JavaScript has no integer division. Use Math.trunc() or Math.floor(). With %, the answer takes the sign of the left number.
• + adds numbers but joins strings. If any side is a string, the result is a string.
• Use === for comparing, && / || / ?? for combining conditions, and the ternary ? : for short decisions.
• Precedence decides which operator runs first, and associativity decides the direction. When in doubt, use brackets.