Heyy there !! In this article, we’ll cover all the operators in JavaScript. Some things you might already know, and some things you’ll get to learn today. So, what are we waiting for? Let’s gooooo!
operators are basically very powerful tools in programming. They are useful to:-
Manipulate data
perform calculation
logic building
Without operators, a programming language would only be able to store values.
What is an operator ?
An operator is a symbol or keyword that tells the computer what operation it should perform on values or variables, while on which we apply operators are called as operands.
Basically operators are classified as 2 types:-
- By functionality
- By number of operands
1. By functionality
By functionality, we mean those operators that perform a specific task and don't depend on the operands.
Let's talk about some operators that are classified by functionality:-
- Assignment operators
- Arithmetic operators
- Comparison operators
- Logical operators
Assignment operators (=, +=, -=, =, *=, /=, %=)
In simple terms, an assignment operator is one or two symbols that are used to assign a value to a variable.
The most common assignment operators are:
= (Assign)
When we want to assign some value in variables, we have to store the values using assignment(=) operator.
let spiderMan = "Peter Parker";
let lifeSpan = 69;
Here we stored Peter Parker and 69 in the variable using the = operator.
there are some more assignments operators in Javascript. Let’s take x = 4 and y = 2for all the assign operators:
| Operator | Name & Example | Same As | Result |
|---|---|---|---|
= |
Assign (x = y) |
x = y |
x = 2 |
+= |
Add and assign (x += y) |
x = x + y |
x = 6 |
-= |
Subtract and assign (x -= y) |
x = x - y |
x = 2 |
*= |
Multiply and assign (x *= y) |
x = x * y |
x = 8 |
**= |
Exponentiate and assign (x **= y) |
x = x ** y |
x = 16 |
/= |
Divide and assign (x /= y) |
x = x / y |
x = 2 |
%= |
Modulus and assign (x %= y) |
x = x % y |
x = 0 |
Arithmetic operators (+, -, , *, /, %, ++, --)
An arithmetic operator is one or more symbols that tells the computer what mathematical operation it should perform on values or variables.
The most common arithmetic operators are:
+ (Addition)
This operator is used to add two values. If the two operands are numbers, the result is the same as the mathematical addition of those numbers.
let num1 = 5
let num2 = 4
console.log(num1 + num2) // 9
In addition, if either operand is a string, JavaScript will treat the other operand as a string as well.
let num1 = 5
let num2 = "4"
let num3 = 3
console.log(num1 + num2) // 54
console.log(num1 + num3 + num2) // 84
The addition operator can also be used to concatenate string values. When the + operator is used with strings, it joins the values together instead of performing mathematical addition.
let fName = "Zyan"
let lName = "Malik"
console.log(fName + lName) // ZyanMalik
let age = 22
console.log(fName + age) //Zyan22
- (Subtraction)
This operator is used to subtract two values. If the two operands are numbers, the result is the same as the mathematical subtraction of those numbers.
let num1 = 5
let num2 = 4
console.log(num1 - num2) // 1
Now think,
If either operand is a string, what would be the result of the subtraction?
let num1 = 5
let num2 = "4"
console.log(num1 - num2) // 1
When we use an arithmetic operator with a string, JavaScript tries to convert the string into a number and then performs the calculation.
For example, 5 - "4" becomes 5 - 4, so the result is 1.
Most arithmetic operators work this way. However, the + operator is different because it can also join strings together, which is called concatenation.
but when you try to subtract non-number values as a string, then the output will show it's not a number (NaN).
let fName = "Zyan"
let lName = "Malik"
console.log(fName - lName) // NaN
* (Multiplication)
This operator is used to multiply two values. If the two operands are numbers, the result is the same as the mathematical multiplication of those numbers.
let num1 = 5
let num2 = 4
console.log(num1 * num2) // 20
If either operand is a string, JavaScript first converts the string into a number and then performs the multiplication. So, the result will be the same as we would expect from normal multiplication.
let num1 = 5
let num2 = "4"
console.log(num1 * num2) // 20
when you try to multiply non-number values as a string, then the output will show it's not a number (NaN) just like subtraction.
let fName = "Zyan"
let lName = "Malik"
console.log(fName * lName) // NaN
/ (Division)
This operator is used to divide two values. If the two operands are numbers, the result is the same as the mathematical division of those numbers.
let num1 = 50
let num2 = 5
console.log(num1 / num2) // 10
let num3 = "10"
console.log(num1 / num3) // 5
let fName = "Zyan"
let lName = "Malik"
console.log(fName / lName) // NaN
% (Modulus)
This operator is used to find the remainder when one value is divided by another. If the two operands are numbers, the result is the same as the mathematical remainder of those numbers.
let num1 = 50
let num2 = 5
console.log(num1 % num2) // 0
let num3 = "10"
console.log(num1 % num3) // 0
let fName = "Zyan"
let lName = "Malik"
console.log(fName % lName) // NaN
** (Exponentiation)
This operator is used to raise a number to a certain power. If both operands are numbers, it gives the same result as normal mathematical exponentiation.
let num1 = 5
let num2 = 2
console.log(num1 ** num2) // 25
let num3 = "2"
console.log(num1 ** num3) // 25
let fName = "Zyan"
let lName = "Malik"
console.log(fName ** lName) // NaN
Here, we have used num1 ** num2, which is mathematically equivalent to 5². That's why the value is 25.
++ (Increment)
The increment operator (++) is a shorthand for increasing a value by 1. Basically, the increment operator means increase the value by 1.
If the increment operator is placed after the variable (num1++), it is called postfix increment. It means return the value first, then increase it by 1.
let num1 = 5
console.log(num1++) // 5
console.log(num1) // 6
If the increment operator is placed before the variable (++num1), it is called prefix increment. It means increase the value first, then return the updated value.
let num1 = 5
console.log(++num1) // 6
-- (Decrement)
The decrement operator (--) is a shorthand for decreasing a value by 1. Basically, the decrement operator means decrease the value by 1.
If the decrement operator is placed after the variable (num1--), it is called postfix decrement. It means return the value first, then decrease it by 1.
let num1 = 5
console.log(num1--) // 5
console.log(num1) // 4
If the decrement operator is placed before the variable (--num1), it is called prefix decrement. It means decrease the value first, then return the updated value.
let num1 = 5
console.log(--num1) // 4
Comparison operators (==, ===, !=, !==, >, <, >=, <=)
Comparison operators are used to compare two values. These operators always return true or false.
Let’s take x = 5 for all the comparison operators:-
| Operator | Description | Example (x = 5) |
Result |
|---|---|---|---|
== |
Equal to | x == 8 |
false |
x == 5 |
true |
||
x == "5" |
true |
||
=== |
Equal value and type | x === 5 |
true |
x === "5" |
false |
||
!= |
Not equal | x != 8 |
true |
!== |
Not equal value or type | x !== 5 |
false |
x !== "5" |
true |
||
x !== 8 |
true |
||
> |
Greater than | x > 8 |
false |
< |
Less than | x < 8 |
true |
>= |
Greater than or equal to | x >= 8 |
false |
<= |
Less than or equal to | x <= 8 |
true |
You might have a question in your mind:-
What is the differenece between
==and===?
Let me clarify this question:-
The == operator is called the loose equality operator because it compares two values even if their data types are different. JavaScript converts the values when needed and then compares them. For example, it can convert a string into a number before comparing.
let a = 5
let b = 4
let c = 5
let d = "5"
console.log(a == b) // false
console.log(a == c) // true
console.log(a == d) // true (Even if the data type of d is a string, it converts the string into a number before comparing it.)
The === operator is called the strict equality operator because it compares both the value and the data type of two operands. First, JavaScript checks if their data types are the same. If they are, it then compares their values.
let a = 5
let b = 4
let c = 5
let d = "5"
console.log(a === b) // false
console.log(a === c) // true
console.log(a === d) // false
Here, the result is simply false. Why? Because the === operator first checks the data types of both operands. In this example, one operand is a number (5) and the other is a string ("5"). Since their data types are different, the operator returns false.
Logical operator (&&, ||, !)
Logical operators are used to combine boolean expressions.
You will use a comparison operator to check a condition, and a logical operator to combine conditions with logics.
| Operator | Name | Description / Example | Result |
|---|---|---|---|
&& |
Logical AND | (5 < 10 && 2 > 1) |
true |
∣ ∣ |
Logical OR | (5 === 5 ∣ ∣ 2 === 5) |
true |
! |
Logical NOT | !(5 === 2) |
true |
Logical AND (&&)
The && operator returns true if both expressions are true, otherwise false:
let's see the truth table of the logical AND operator:-
| Input A (A) | Input B (B) | Result (A && B) |
| :--- | :--- | :--- |
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
let x = 6;
let y = 3;
let z = (x < 10 && y > 1)
console.log(z); // true
Real world example:-
Imagine you are a club manager and you want to give entry only to adults (age above 18 and below 26).
Here we have two conditions:-
age above 18
age below 26
For condition 1 and 2, we have to use the comparison operators we read above:-
age above 18 (age > 18)
age below 26 (age < 26)
Now we have to combine those two conditional operators using logical AND:-
let age = 18
console.log(age > 18 && age < 26) // false (the condition is above 18)
let age = 24
console.log(age > 18 && age < 26) // true
Logical OR (||)
The || operator returns true if either one condition is true, otherwise false:
let's see the truth table of the logical OR operator:-
| Input A (A) | Input B (B) | Result (A || B) |
| :--- | :--- | :--- |
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
let x = 6;
let y = 3;
let z = (x < 10 || y < 1)
console.log(z); // true
Real world example:-
Imagine you are building a website. You want to allow login if the user enters the correct email or phone number.
Here we have two conditions:-
- phoneNumber
Now we have to implement logical OR for these two conditions:-
let email = "ranveerkapoor@gmail.com"
let phoneNumber = 9876543210
console.log(email === "ranveerkapoor@gmail.com" || phone === 9876543210) // true
If the user logs in either using his email or phone number, then he will land on the login interface.
2. By number of operands
This division depends upon the number of operands you're using in the condition.
Let's talk about some operators that are classified by number of operands:-
- Unary operator
- Binary operator
- Ternary operator
1. Unary operator
If there is a single operand then it is called as unary operator.
let a = 4
console.log(-a) // -4
Here we're using only one operand(-4), so it is an unary operator.
1. Binary operator
If we are implementing an operation using two operands then this is called as binary operator.
let a = 5
let b = 4
console.log(a - b) // 1
In the above, there are two operands(a and b). So it's an example of binary operator.
1. Ternary operator
If we are implementing an operation using three parts, then this is called a ternary operator (?). It is also a shorthand for an if-else statement. In a ternary operator, we use the ? symbol to implement the operation.
The syntax of performing it is:-
condition ? valueIfTrue : valueIfFalse
let age = 20
console.log(age >= 18 ? "Adult" : "Minor") // Adult
In the above example, we first have to provide a condition. If the condition is true, then "Adult" is returned; otherwise, "Minor" is returned.
___ X ___
That's it for today! We covered all the major operators in JavaScript and understood how they work with different types of operands.
See you in the next one! ✌️
Top comments (0)