JavaScript Operators: The Basics You Need to Know
Introduction
Think about using a calculator. You input numbers and use buttons like +, -, *, and / to perform calculations. Operators in programming work the same way. They are symbols that tell JavaScript to perform specific actions on values.
In JavaScript, operators are tools that help you perform calculations, make comparisons, and combine conditions. In this blog, we will learn about the most important operators you will use every day: arithmetic operators, comparison operators, logical operators, and assignment operators.
1. What Are Operators?
An operator is a symbol that performs an action on one or more values. The values that operators work on are called operands.
Simple Analogy
Imagine you are in a shop buying notebooks:
5 notebooks (operand) + 3 notebooks (operand) = 8 notebooks (result)
The "+" is the operator
For example:
10 + 5 // 10 and 5 are operands, + is the operator
Types of Operators
JavaScript has several types of operators:
Arithmetic operators (for math)
Comparison operators (for comparing)
Logical operators (for combining conditions)
Assignment operators (for assigning values)
Each type serves a different purpose, and we will learn about all of them in this blog.
2. Arithmetic Operators
Arithmetic operators perform mathematical calculations. They work just like the math you learned in school.
The Five Main Arithmetic Operators
Addition (+)
Adds two numbers together.
let a = 10;
let b = 5;
let sum = a + b;
console.log(sum); // Output: 15
You can also use it with strings (we will learn about this later):
let firstName = "Ashish";
let lastName = "Saini";
let fullName = firstName + " " + lastName;
console.log(fullName); // Output: Ashish Saini
Subtraction (-)
Subtracts the second number from the first number.
let price = 500;
let discount = 100;
let finalPrice = price - discount;
console.log(finalPrice); // Output: 400
Multiplication (*)
Multiplies two numbers.
let quantity = 5;
let pricePerUnit = 20;
let totalCost = quantity * pricePerUnit;
console.log(totalCost); // Output: 100
Division (/)
Divides the first number by the second number.
let totalMarks = 480;
let numberOfSubjects = 6;
let marksPerSubject = totalMarks / numberOfSubjects;
console.log(marksPerSubject); // Output: 80
Modulus (%)
Returns the remainder after division. This is very useful for checking if a number is even or odd.
let number = 10;
let remainder = number % 3;
console.log(remainder); // Output: 1
Why? Because 10 divided by 3 equals 3 with a remainder of 1.
Arithmetic Operators Table
| Operator | Name | Example | Result |
|---|---|---|---|
| + | Addition | 10 + 5 | 15 |
| - | Subtraction | 10 - 5 | 5 |
| * | Multiplication | 10 * 5 | 50 |
| / | Division | 10 / 5 | 2 |
| % | Modulus (Remainder) | 10 % 3 | 1 |
3. Comparison Operators
Comparison operators compare two values and return either true or false. They are useful for making decisions in your code.
The Main Comparison Operators
Greater Than (>)
Checks if the first value is greater than the second value.
let age = 20;
let minAge = 18;
console.log(age > minAge); // Output: true
let score = 75;
console.log(score > 80); // Output: false
Less Than (<)
Checks if the first value is less than the second value.
let temperature = 10;
console.log(temperature < 15); // Output: true
let price = 500;
console.log(price < 300); // Output: false
Greater Than or Equal To (>=)
Checks if the first value is greater than or equal to the second value.
let age = 18;
console.log(age >= 18); // Output: true
let marks = 75;
console.log(marks >= 80); // Output: false
Less Than or Equal To (<=)
Checks if the first value is less than or equal to the second value.
let speed = 60;
console.log(speed <= 80); // Output: true
let weight = 100;
console.log(weight <= 90); // Output: false
Equal To (==)
Checks if two values are equal. This operator does type coercion, meaning it converts types to compare values.
let a = 5;
let b = "5";
console.log(a == b); // Output: true
Even though a is a number and b is a string, JavaScript converts one to match the other and returns true.
More examples:
let x = 10;
let y = 10;
console.log(x == y); // Output: true
let name1 = "Ashish";
let name2 = "Ashish";
console.log(name1 == name2); // Output: true
Strict Equal To (===)
Checks if two values are equal AND if they are the same type. This is the recommended way to compare values.
let a = 5;
let b = "5";
console.log(a === b); // Output: false
Now the result is false because 5 (number) and "5" (string) are different types.
More examples:
let x = 10;
let y = 10;
console.log(x === y); // Output: true
let c = 5;
let d = 5.0;
console.log(c === d); // Output: true (both are numbers)
Not Equal To (!=)
Checks if two values are NOT equal. Like ==, it does type coercion.
let a = 5;
let b = "5";
console.log(a != b); // Output: false (they are equal after type coercion)
let x = 10;
let y = 20;
console.log(x != y); // Output: true
Strict Not Equal To (!==)
Checks if two values are NOT equal OR if they are different types. This is the recommended way.
let a = 5;
let b = "5";
console.log(a !== b); // Output: true (different types)
let x = 10;
let y = 10;
console.log(x !== y); // Output: false (same value and type)
Important: == vs ===
This is a very important concept. Let's understand it with more examples:
// Using == (loose equality)
console.log(0 == false); // Output: true
console.log("" == false); // Output: true
console.log(null == undefined); // Output: true
console.log("5" == 5); // Output: true
// Using === (strict equality)
console.log(0 === false); // Output: false
console.log("" === false); // Output: false
console.log(null === undefined); // Output: false
console.log("5" === 5); // Output: false
Best Practice
Always use === and !== in JavaScript. They are safer and more predictable because they do not do type coercion. Using == can lead to unexpected results.
Comparison Operators Table
| Operator | Name | Example | Result |
|---|---|---|---|
| > | Greater than | 10 > 5 | true |
| < | Less than | 10 < 5 | false |
| >= | Greater than or equal | 10 >= 10 | true |
| <= | Less than or equal | 10 <= 5 | false |
| == | Equal (loose) | "5" == 5 | true |
| === | Equal (strict) | "5" === 5 | false |
| != | Not equal (loose) | "5" != 5 | false |
| !== | Not equal (strict) | "5" !== 5 | true |
4. Logical Operators
Logical operators combine multiple conditions to make more complex decisions. They return true or false based on the conditions.
The Three Main Logical Operators
AND (&&)
The AND operator returns true only if BOTH conditions are true. If even one condition is false, the result is false.
Think of it like this: "I will go to the movie IF I have time AND I have money".
let hasTime = true;
let hasMoney = true;
if (hasTime && hasMoney) {
console.log("Let's go to the movie!");
}
// Output: Let's go to the movie!
let hasTime = true;
let hasMoney = false;
if (hasTime && hasMoney) {
console.log("Let's go to the movie!");
} else {
console.log("I cannot go because I don't have money");
}
// Output: I cannot go because I don't have money
OR (||)
The OR operator returns true if AT LEAST ONE condition is true. It returns false only if both conditions are false.
Think of it like this: "I will have tea OR coffee" (I am satisfied with either one).
let isWeekend = true;
let isHoliday = false;
if (isWeekend || isHoliday) {
console.log("No college today!");
}
// Output: No college today!
Even though isHoliday is false, isWeekend is true, so the overall condition is true.
NOT (!)
The NOT operator reverses the boolean value. If a condition is true, NOT makes it false. If a condition is false, NOT makes it true.
Think of it like this: "NOT raining" means it is sunny.
let isRaining = true;
if (!isRaining) {
console.log("Let's play outside");
} else {
console.log("Let's stay inside");
}
// Output: Let's stay inside
Since isRaining is true, !isRaining is false.
let isRaining = false;
if (!isRaining) {
console.log("Let's play outside");
} else {
console.log("Let's stay inside");
}
// Output: Let's play outside
Now isRaining is false, so !isRaining is true.
Combining Multiple Logical Operators
You can combine multiple logical operators to create complex conditions:
let age = 22;
let hasLicense = true;
let isInsured = true;
if (age >= 18 && hasLicense && isInsured) {
console.log("You can drive safely");
} else {
console.log("You cannot drive");
}
// Output: You can drive safely
All three conditions must be true for the message to print.
Truth Table for Logical Operators
AND (&&) Truth Table
| A | B | A && B |
|---|---|---|
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
Remember: AND returns true only when both are true.
OR (||) Truth Table
| A | B | A || B | | --- | --- | --- | | true | true | true | | true | false | true | | false | true | true | | false | false | false |
Remember: OR returns false only when both are false.
NOT (!) Truth Table
| A | !A |
|---|---|
| true | false |
| false | true |
Remember: NOT flips the value.
Logical Operators Table
| Operator | Name | Example | Result |
|---|---|---|---|
| && | AND | true && false | false |
| OR | |||
| ! | NOT | !true | false |
5. Assignment Operators
Assignment operators assign values to variables. The most basic one is =, but there are others that combine assignment with other operations.
Basic Assignment (=)
The = operator assigns a value to a variable.
let name = "Ashish";
let age = 20;
let score = 95;
console.log(name); // Output: Ashish
console.log(age); // Output: 20
console.log(score); // Output: 95
Addition Assignment (+=)
Adds a value to the variable and assigns the result back to the variable. It is a shorthand for x = x + y.
let count = 10;
count += 5; // Same as: count = count + 5
console.log(count); // Output: 15
Step by step:
count is 10
count += 5 means count = count + 5, which is count = 10 + 5
count becomes 15
Subtraction Assignment (-=)
Subtracts a value from the variable and assigns the result back. Shorthand for x = x - y.
let money = 100;
money -= 30; // Same as: money = money - 30
console.log(money); // Output: 70
Multiplication Assignment (*=)
Multiplies the variable by a value and assigns the result back. Shorthand for x = x * y.
let price = 50;
price *= 2; // Same as: price = price * 2
console.log(price); // Output: 100
Division Assignment (/=)
Divides the variable by a value and assigns the result back. Shorthand for x = x / y.
let total = 100;
total /= 5; // Same as: total = total / 5
console.log(total); // Output: 20
When to Use Assignment Operators
Assignment operators are useful when you want to update a variable based on its current value.
Without assignment operators:
let score = 10;
score = score + 5;
score = score + 3;
score = score - 2;
console.log(score); // Output: 16
With assignment operators (cleaner):
let score = 10;
score += 5;
score += 3;
score -= 2;
console.log(score); // Output: 16
Assignment Operators Table
| Operator | Same As | Example | Result |
|---|---|---|---|
| = | Assignment | x = 10 | x is 10 |
| += | x = x + y | x = 5; x += 3 | x is 8 |
| -= | x = x - y | x = 10; x -= 4 | x is 6 |
| *= | x = x * y | x = 5; x *= 2 | x is 10 |
| /= | x = x / y | x = 20; x /= 4 | x is 5 |
Operator Categories Summary Table
| Category | Operators | Purpose | Example |
|---|---|---|---|
| Arithmetic | +, -, *, /, % | Perform math | 10 + 5 = 15 |
| Comparison | >, <, >=, <=, ===, !== | Compare values | 10 > 5 = true |
| Logical | &&, | , ! | |
| Assignment | =, +=, -=, *=, /= | Assign values | x += 5 |
Common Mistakes to Avoid
Mistake 1: Using == Instead of ===
// Wrong
if (userInput == 5) { // Dangerous!
// Code here
}
// Correct
if (userInput === 5) { // Safe!
// Code here
}
Always use === for comparisons.
Mistake 2: Forgetting Parentheses with Logical Operators
JavaScript
// Confusing
let result = age > 18 && hasLicense || hasMoney;
// Clear
let result = (age > 18 && hasLicense) || hasMoney;
Use parentheses to make your intent clear.
Mistake 3: Using = Instead of ==
// Wrong
if (age = 18) { // This assigns 18 to age instead of comparing
// Code here
}
// Correct
if (age === 18) { // This compares
// Code here
}
Be careful not to confuse assignment (=) with comparison (=== or ==).
Summary
Operators are symbols that perform actions on values
Arithmetic operators (+, -, *, /, %) perform math calculations
Comparison operators (>, <, >=, <=, ===, !==) compare values and return true or false
Always use === instead of == for safer comparisons
Logical operators (&&, ||, !) combine conditions
AND (&&) returns true only if both conditions are true
OR (||) returns true if at least one condition is true
NOT (!) reverses the boolean value
Assignment operators (=, +=, -=, *=, /=) assign or update values
Use parentheses to make complex conditions clear
