JavaScript Operators: Arithmetic, Comparison and Logical

What you will learn

Values on their own do not do much. Operators are the symbols that let you work with them: add numbers, compare two values, or combine conditions. In this lesson you will learn the arithmetic, assignment, comparison and logical operators, and the most important difference in beginner JavaScript: == vs ===.

What is an operator?

An operator is a symbol that performs an action on one or more values. The values it works on are called operands.

console.log(10 + 5);

Here + is the operator, and 10 and 5 are the operands.

Arithmetic operators

These do maths, just like a calculator:

Operator	Name	Example	Result
+	Addition	10 + 3	13
-	Subtraction	10 - 3	7
*	Multiplication	10 * 3	30
/	Division	10 / 4	2.5
%	Remainder (modulus)	10 % 3	1
**	Power (exponent)	2 ** 3	8

console.log(10 + 3);    // 13
console.log(10 - 3);    // 7
console.log(10 * 3);    // 30
console.log(10 / 4);    // 2.5
console.log(10 % 3);    // 1
console.log(2 ** 3);    // 8  (2 x 2 x 2)

The remainder operator %

% gives what is left over after division. 10 divided by 3 is 3 with 1 left over, so 10 % 3 is 1.

It looks odd at first, but it is very useful. The classic use is checking even or odd:

console.log(8 % 2);    // 0  (no remainder: even)
console.log(7 % 2);    // 1  (remainder: odd)

If number % 2 is 0, the number is even.

Order of operations

JavaScript follows the same rules as school maths (BODMAS): brackets first, then powers, then multiplication and division, then addition and subtraction.

console.log(2 + 3 * 4);     // 14  (multiplication first)
console.log((2 + 3) * 4);   // 20  (brackets first)

When in doubt, use brackets. They also make your code easier to read.

Increment and decrement

Adding or subtracting 1 is so common that it has a shortcut:

let count = 5;

count++;                 // same as count = count + 1
console.log(count);      // 6

count--;                 // same as count = count - 1
console.log(count);      // 5

Assignment operators

You already know =, which stores a value in a variable. There are shortcuts that calculate and store in one step:

Operator	Meaning	Same as
=	Assign	x = 5
+=	Add and assign	x = x + 5
-=	Subtract and assign	x = x - 5
*=	Multiply and assign	x = x * 5
/=	Divide and assign	x = x / 5

let score = 10;

score += 5;
console.log(score);   // 15

score *= 2;
console.log(score);   // 30

The + operator with strings

With numbers, + adds. With strings, + joins them together. This is called concatenation.

console.log("Hello" + " " + "World");   // "Hello World"

const firstName = "Riya";
console.log("My name is " + firstName);  // "My name is Riya"

When you mix a string and a number, JavaScript turns the number into text and joins them:

console.log("Age: " + 20);     // "Age: 20"
console.log("5" + 3);          // "53"  (not 8!)
console.log(5 + 3 + "px");     // "8px" (left to right: 5+3 first, then join)
console.log("px" + 5 + 3);     // "px53"

The other arithmetic operators do not join anything, so they turn text into numbers when they can:

console.log("10" - 3);     // 7
console.log("10" * "2");   // 20
console.log("hello" - 3);  // NaN

Comparison operators

Comparison operators compare two values and always give a boolean answer: true or false.

Operator	Meaning	Example	Result
>	Greater than	5 > 3	true
<	Less than	5 < 3	false
>=	Greater than or equal	5 >= 5	true
<=	Less than or equal	4 <= 3	false
===	Strictly equal	5 === 5	true
!==	Strictly not equal	5 !== 3	true
==	Loosely equal	5 == "5"	true
!=	Loosely not equal	5 != "5"	false

const age = 20;

console.log(age > 18);     // true
console.log(age < 18);     // false
console.log(age >= 20);    // true
console.log(age === 20);   // true

You can also compare strings. They are compared letter by letter, using dictionary order, and capital letters come before small letters:

console.log("apple" < "banana");   // true
console.log("a" === "A");          // false

== vs ===: the most important difference

This is a favourite interview question, and a very common source of bugs.

• == (loose equality) converts the types first, and then compares. It says “are these values similar enough?”
• === (strict equality) compares the value and the type, without any conversion. It says “are these exactly the same?”

console.log(5 == "5");     // true   (the string "5" is converted to a number)
console.log(5 === "5");    // false  (number vs string: different types)

Think of it like matching a key to a lock. === needs the exact key. == says “a key that looks close enough will do”, and that is not what you want on your front door.

Loose equality gives some strange results:

console.log(0 == false);        // true
console.log("" == false);       // true
console.log(null == undefined); // true
console.log("1" == true);       // true

console.log(0 === false);         // false
console.log("" === false);        // false
console.log(null === undefined);  // false

Because == can surprise you, follow this rule:

Always use === and !==. Use == only if you have a special reason and know exactly what it does.

One special case: NaN is not equal to anything, including itself.

console.log(NaN === NaN);   // false

To check for NaN, use Number.isNaN(value). You will see this in the numbers lesson.

Logical operators

Logical operators combine or reverse booleans. They let you ask multiple questions at once.

Operator	Name	Meaning
&&	AND	true only if both sides are true
||	OR	true if at least one side is true
!	NOT	Flips true to false and false to true

&& (AND)

Both conditions must be true. Real-life example: “You can enter the exam if you have a hall ticket AND an ID card.”

const hasTicket = true;
const hasId = true;

console.log(hasTicket && hasId);      // true
console.log(hasTicket && false);      // false

|| (OR)

At least one condition must be true. Real-life example: “You get a discount if you are a student OR a senior citizen.”

const isStudent = false;
const isSenior = true;

console.log(isStudent || isSenior);   // true
console.log(false || false);          // false

! (NOT)

It reverses the value:

const isRaining = false;

console.log(!isRaining);   // true
console.log(!true);        // false

The truth tables

A	B	A && B	A || B
true	true	true	true
true	false	false	true
false	true	false	true
false	false	false	false

Combining comparisons and logic

The real power comes from mixing them:

const age = 25;
const hasLicense = true;

const canDrive = age >= 18 && hasLicense;
console.log(canDrive);   // true

const day = "Sunday";
const isWeekend = day === "Saturday" || day === "Sunday";
console.log(isWeekend);  // true

A common beginner mistake is shortening the condition like this: day === "Saturday" || "Sunday". That does not work. You must repeat the full comparison on each side.

Short-circuiting

&& and || are lazy. They stop as soon as the answer is known:

• A && B: if A is false, the answer is already false, so B is never checked.
• A || B: if A is true, the answer is already true, so B is never checked.

This gives a very handy trick. In JavaScript, && and || do not always return true or false. They return one of the actual values. So || can provide a default value:

const userName = "";
const displayName = userName || "Guest";

console.log(displayName);   // "Guest"

Because an empty string counts as “false-like”, || moves to the next value. (Which values count as false-like is explained in the conditions lesson.)

Bonus: the nullish operator ??

|| treats 0 and "" as “empty” too, which is sometimes not what you want. The nullish coalescing operator ?? uses the fallback only for null or undefined:

const score = 0;

console.log(score || 100);   // 100  (0 counts as false-like: probably a bug)
console.log(score ?? 100);   // 0    (0 is a real value, so it is kept)

Do not worry if this feels advanced. Just remember that ?? exists for the times when 0 is a valid answer.

The typeof operator

You met this one in the last lesson. It is also an operator, and it works well with comparisons:

const value = "hello";
console.log(typeof value === "string");   // true

Common mistakes

• Using = instead of ===. = stores a value, and === compares. if (x = 5) changes x instead of checking it.
• Using == and getting surprises. 0 == false and "" == 0 are true. Use ===.
• Forgetting that + joins strings. "5" + 3 is "53". Convert first if you want maths.
• Writing 18 < age < 60. JavaScript does not understand chained comparison the way maths does. Write age > 18 && age < 60.
• Half-written OR conditions. day === "Sat" || "Sun" is always truthy. Write day === "Sat" || day === "Sun".
• Expecting 0.1 + 0.2 === 0.3. It is false, because of the decimal precision problem you saw earlier.
• Confusing && (and) with &. A single & or | is a different operator used for bit-level work. For conditions, always use && and ||.

Practice

1. In the editor, create const price = 500; and const quantity = 4;. Print the total, then print the total after a 10% discount.
2. Use % to check whether the numbers 14, 27 and 100 are even or odd. Print true or false for each (hint: number % 2 === 0).
3. Predict each result first, then run them: "3" + 4, "3" - 1, "3" * "4", 3 + 4 + "5", "5" + 3 + 4.
4. Compare using == and then ===: 1 and "1", 0 and false, null and undefined. Which pairs give different answers?
5. Write a check for a cinema ticket. Create age and hasTicket. Print true only if the person is 12 or older and has a ticket.
6. Use || to give a default: const username = "" then print username || "Guest". Now try username = "Aman".

Recap

• Operators perform actions on values (operands).
• Arithmetic: + - * / % **, plus ++ and --. % gives the remainder and is great for even/odd checks.
• Assignment: =, and shortcuts like += and *=.
• With strings, + joins text. With a string and a number, the result is text.
• Comparison operators (> < >= <=) give true or false.
• == converts types before comparing and gives surprises. === checks value and type. Always use === and !==.
• Logical: && (both true), || (at least one true), ! (flip). || can supply a default value, and ?? does so only for null and undefined.
• Next you will work with strings: their methods and template literals.