Tutorial # 04: JavaScript Operators: 7 Types Explained (2026 Guide)

In the previous tutorial, you learned about data types like strings, numbers and booleans. Now it’s time to do something with that data. This is where JavaScript Operators come in. They let you add numbers, compare values, and make decisions in your code.

What are JavaScript Operators?

An operator is a symbol that tells JavaScript to perform an action on one or more values. The values are called operands.

let result = 10 + 5;
console.log(result); // 15

Here, + is the operator, and 10 and 5 are the operands. In this tutorial, we will learn the 7 most important JavaScript Operators with practical code.

1. Arithmetic Operators

These are used for math calculations.

Operator	Name	Example	Result
+	Addition	10 + 5	15
–	Subtraction	10 – 5	5
*	Multiplication	10 * 5	50
/	Division	10 / 5	2
%	Remainder (Modulus)	10 % 3	1
**	Exponent (Power)	2 ** 3	8

let a = 20;
let b = 6;

console.log(a + b);  // 26
console.log(a - b);  // 14
console.log(a * b);  // 120
console.log(a / b);  // 3.3333333333333335
console.log(a % b);  // 2
console.log(a ** 2); // 400

The remainder operator % is very useful. For example, it helps you check if a number is even or odd:

console.log(10 % 2); // 0 (even number)
console.log(7 % 2);  // 1 (odd number)

2. Assignment Operators

These operators store a value in a variable. The basic one is =, and the others are shortcuts.

Operator	Example	Same as
=	x = 10	x = 10
+=	x += 5	x = x + 5
-=	x -= 5	x = x – 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5

let score = 10;

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

score -= 3;
console.log(score); // 12

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

score /= 4;
console.log(score); // 6

3. Comparison Operators

These JavaScript Operators compare two values and always return true or false.

Operator	Meaning	Example	Result
==	Equal (value only)	5 == “5”	true
===	Strict equal (value and type)	5 === “5”	false
!=	Not equal	5 != 3	true
!==	Strict not equal	5 !== “5”	true
>	Greater than	10 > 5	true
<	Less than	10 < 5	false
>=	Greater than or equal	10 >= 10	true
<=	Less than or equal	5 <= 3	false

let age = 18;

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

Important: == vs ===

console.log(5 == "5");   // true  (compares value only)
console.log(5 === "5");  // false (compares value AND type)

Best practice: always use === in your code. It is safer and avoids confusing bugs.

4. Logical Operators

Logical operators combine two or more conditions.

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

let age = 22;
let hasID = true;

console.log(age >= 18 && hasID);  // true (both are true)
console.log(age < 18 || hasID);   // true (one is true)
console.log(!hasID);              // false (reversed)

Real-life example: a user can enter a website only if they are 18 or older AND have a valid ID. That is exactly what && checks.

5. String Operator (Concatenation)

The + operator also joins strings together.

let firstName = "Ali";
let lastName = "Khan";

let fullName = firstName + " " + lastName;
console.log(fullName); // Ali Khan

let message = "I am " + 25 + " years old";
console.log(message);  // I am 25 years old

let text = "Hello";
text += " World";
console.log(text);     // Hello World

Be careful when mixing numbers and strings:

console.log("5" + 5);  // "55" (string joined)
console.log("5" - 2);  // 3   (converted to number)

6. Increment and Decrement Operators

These increase or decrease a number by exactly 1.

let count = 5;

count++;
console.log(count); // 6

count--;
console.log(count); // 5

let x = 5;
console.log(x++); // 5 (prints first, then increases)
console.log(x);   // 6

let y = 5;
console.log(++y); // 6 (increases first, then prints)

You will use ++ a lot in loops, which we will learn later in this series.

7. Ternary Operator

The ternary operator is a short way to choose between two values based on a condition.

// Syntax: condition ? valueIfTrue : valueIfFalse

let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // Adult

let marks = 45;
let result = marks >= 50 ? "Pass" : "Fail";
console.log(result); // Fail

Operator Precedence (Which Runs First?)

Just like in math, JavaScript follows an order. Multiplication and division run before addition and subtraction. Use brackets ( ) to control the order.

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

Practical Example: Shopping Bill Calculator

Let’s use many JavaScript Operators together in one real program:

const itemPrice = 1500;
let quantity = 3;
const discountLimit = 4000;

let total = itemPrice * quantity;
console.log("Total: " + total);        // Total: 4500

let hasDiscount = total > discountLimit;
console.log("Discount? " + hasDiscount); // Discount? true

let discount = hasDiscount ? total * 0.10 : 0;
console.log("Discount: " + discount);  // Discount: 450

let finalBill = total - discount;
console.log("Final Bill: " + finalBill); // Final Bill: 4050

finalBill += 200; // delivery charges
console.log("With Delivery: " + finalBill); // With Delivery: 4250

In this small program we used arithmetic, comparison, ternary, string and assignment operators together.

Quick Recap

• Arithmetic operators do math: + - * / % **
• Assignment operators store values: = += -= *= /=
• Comparison operators return true or false: == === != !== > < >= <=
• Logical operators combine conditions: && || !
• The + operator also joins strings
• ++ and -- increase or decrease by 1
• The ternary operator ? : is a short if/else

Great job! You now understand how JavaScript Operators work, and you will use them in every program you write.

Practice Exercises

1. Create two variables num1 = 25 and num2 = 4. Print their sum, difference, product, division and remainder.
2. Create a variable points = 100. Use += to add 50, then -= to subtract 30, and print the result after each step.
3. Compare 10 == "10" and 10 === "10". Print both results and write a comment explaining the difference.
4. Create age = 25 and hasLicense = true. Use && to check if a person can drive and print the result.
5. Use the ternary operator to print “Even” or “Odd” for the number 17.

Assignment

Build a Student Result Calculator:

1. Create 3 variables for marks: math, science, english (any values out of 100).
2. Calculate the total marks and the percentage (total divided by 300, multiplied by 100).
3. Use the ternary operator to print “Pass” if percentage is 40 or above, otherwise “Fail”.
4. Use logical operators to check if the student scored above 33 in all three subjects.
5. Print everything in a clean format, for example: Total: 240 | Percentage: 80 | Result: Pass

Bonus Challenge

Create a variable number = 36. Use the % operator and logical operators to check if the number is divisible by both 3 and 4. Print “Yes” or “No” using a ternary operator.

What’s Next?

In the next tutorial, we will learn JavaScript Conditional Statements (if, else, switch). You will use the comparison and logical operators from this lesson to make your programs take decisions.

Missed the last tutorial? Go back to JavaScript Data Types, or browse the full JavaScript Tutorial Series. For deeper reference, see the MDN guide to expressions and operators.