Introduction
Operators in Javascript in are nothing but the symbols, yes you heard it right these are just symbols which performs operations on operands (values or variables). Think of JavaScript operators like the action buttons on a calculator or the verbs in a sentence. They are simply symbols that tell the computer what to do with your data (like adding numbers together or checking if a password is correct).
In programming, the data you are working with are called operands, and the symbol doing the work is the operator. Understand operators requires practical more than theory, so we will go through types of operators and examples.
Different types of Operators
1. Arithmetic Operators
These operators do exactly what you expect them to do—basic math. Let understand arithmetic operators by taking the example of two numbers x and y.
const x = 10;
const y = 4;
A. +
It is addition operator, it simply adds the numbers together.
const z = x + y // 10+4
console.log(z)
// output: 14
B. -
It does the subtraction of the numbers.
const z = x - y // 10-4
console.log(z)
// output: 6
C. *
It is multiplication operator, yes it's symbol is different from the mathematics multiplication but does the same thing.
const z = x * y // 10 * 4
console.log(z)
// output: 40
D. /
This is the symbol for performing the division operation, it divides the number written in its left by the number written in its right side.
const z = x / y // 10 / 4
console.log(z)
// output: 2.5
E. %
This symbol is to perform the modulus(remainder) operation. It gives the remainder after dividing.
const z = x % y // 10 % 4
console.log(z)
// output: 2
As 10 is not completely divisible by 4. 4*2 = 8. and 10-8 = 2. So the 2 left as a remainder.
F. **
Double * is used to perform the exponent (power).
const z = x ** 2 // 4^2
console.log(z)
// output: 16
x ** y this means x to the power of y i.e. x^y.
Arithmetic operators at a glance.
| Operator | Meaning | Example | Result |
|---|---|---|---|
+ |
Addition | 5 + 3 |
8 |
- |
Subtraction | 5 - 3 |
2 |
* |
Multiplication | 5 * 3 |
15 |
/ |
Division | 6 / 3 |
2 |
% |
Modulus (remainder) | 5 % 2 |
1 |
** |
Exponent (power) | 2 ** 3 |
8 |
2. Comparison Operators
These operators compares two values. These operators ask the computer a question. The computer will always answer with a simple True or False.
A. ==
This operator is used to compare two values if they are correct or not, it is a loose equality that means it only checks the values not the data types. Internally it allows type conversion. == operator does type coercion (automatic type conversion) and returns true or false.
Let understand this better by examples.
const x = 5
const y = 5
const z = '5'
console.log(x==y)
// output: true, because 5 is equal to 5
console.log(x==z)
// output: true, because it only checks the value not the data type
When we compared the 5 and '5' internally it converts the '5' into number (Number('5')) and then performs the equality operation.
Let's go through more examples to understand better.
console.log(true == 1) // true
console.log(true == 0) // false
console.log(false == 0) // true
console.log(false == 1) // false
Now you will be thinking how boolean can be compared to number but Javascript converts true as 1 and false as 0 and then compares.
| Boolean | Number |
|---|---|
true |
1 |
false |
0 |
B. ===
It checks if two values are equal or not, but along with value it also checks for the data type, let's go through the examples to understand it, it is a strict equality.
console.log(5 === 5) // true, 5 is equal to 5
console.log('5' === 5) // false, because '5' is string and 5 is number, values are same but data types are different.
console.log(true === 1) // false, because
=== vs ==
Example | == (Loose) Result | === (Strict) Result | Why? |
| True | True | Both value and type (Number) are identical. |
| True | False | Values look the same, but types (Number vs String) are different. |
| True | False |
|
C. !=
This is not equal to operator, this checks if two values are equal or not. This is bit confusing for the beginners just, just think it as the == operator and reverse it's final answer. For example
console.log(5 != 5) // false, because 5 is equal to 5 but here we are checking for not equals
cnosole.log(5 != 4) // true, because 5 is not equal to 4, and exactly what we are checking for i.e. not equals to.
In programming thin ! as a negation, for example !true = false.
Now tell me one answer, what if your crush said !Yes to you, tell what does it mean, you what it means😂
D. >
It is greater than operator, it checks the value of the left hand side is greater than right hand side or not and it returns boolean. Lets see the examples.
console.log(10>8) // true
console.log(5>12) // false
E. <
It is less than operator, it checks the value of the left hand side is lesser than right hand side or not, and returns boolean value. Examples are given below.
console.log(10<8) // false, because 10 is greater 8
console.log(5<23) // true, 5 is less than 22
3. Logical Operators
Logical operators are used to combine the boolean values and expressions. It allows the multiple conditions together, which are essential and used in decision making. This operators are exactly like Logic Gates Lets discuss the different types of logical operators. // &&, || and !
A. AND &&
It is AND operator, it returns true if all the conditions are satisfied or all the condition are true. It returns first falsy value, or last value if all the values are truthy. Lets see the examples to understand it better.
true && true // true
true && false // false
5 && "hello" // "hello" (both truthy, returns last)
0 && "hello" // 0 (0 is falsy, returns first falsy)
let age = 20
let isAdmin = false
if(age > 18 && isAdmin) // this if block will not execute because all the conditions are not true.
B. OR ||
OR operator in used to check if atleast one of multiple conditions is true. Returns the first truthy value, or the last value if all are falsy.
true || false // true
false || false // false
0 || "hello" // "hello" (first truthy)
0 || null // null (both falsy, returns last)
It executes the block of code if any one of the condition is satisfied.
const aadhar = true
const license = false
const pancard = false
if(aadhar || license || pancard) // this block will execute because atleast one of them is true.
C. NOT !
This operator simply flips the boolan value, if true then false or if false then true.
!true // false
!false // true
So now tell me what if your crush said !Yes to you.
3. Assignment Operators
Assignment operators are used to assign values to your variables.
A. =
This simply assigns the value to the variable, variable is written on the left side and value on the right.
let x = 5
let isLoggedIn = true
// x and isLoggedIn are variables and their values 5 and true respectively
B. +=
This operator adds a value to the current variable and saves the new result.
(x+=5) is equal to (x = x+5)
let x = 5;
x += 5; // this is equal x = x + 5
console.log(x) // output: 10
C. -=
This operator subtracts a value from the current operator and saves it.
let x = 10
x-=5; // this is equal to x = x-5
console.log(x) // output: 5
Everyday Usage:
let score = 10; // Assigns the initial value of 10 to 'score'
console.log(score); // Outputs: 10
score += 5; // A shortcut for: score = score + 5
console.log(score); // Outputs: 15
score -= 2; // A shortcut for: score = score - 2
console.log(score); // Outputs: 13
Conclusion
Operators might seem like tiny, simple symbols, but they are the true engine of your JavaScript. They transform static data into dynamic, interactive applications. Without them, your program can't calculate a shopping cart total, verify a user's password, or decide whether to show a "Welcome back!" message or a login screen.
Don't worry if it takes a little time to remember the difference between == and === or how && interacts with ||. The best way to master these building blocks is by getting your hands dirty and writing code. Try out the assignment above, play around in your console, and see what happens when you experiment with different values.
Before you know it, reading and writing these logical statements will become second nature, paving the way for you to build much more complex and exciting applications!
