JavaScript Operators: The Building Blocks of Smart Code

Imagine you are standing in a furniture factory. All of your surroundings are filled with raw materials like pile of woods, boxes of screws, and cans of polish. But all of this raw materials can not magically assembles and make a furniture, we need proper tools to cut, measure, join, and shape them.

In the world of programming the raw materials are called variables and the tools are operators.

Another way we can think of this like variables are like the Noun of the program which stores the values and the operators are like the Verb.

Operators are the special symbols that performs on data, calculating math, comparing values and make decisions on your code.

We need operators everywhere from building small calculators to big web applications. This article goes you through the operators in JavaScript that will be very useful throughout your JavaScript Journey.

To get the most out of this blog, I recommend opening your browser’s developer tools console (usually F12 -> Console tab) or a code editor so you can test these tools out alongside me!

What is Operator?

Operators are the symbol to manipulate values. It performs operations on variables and values. In the programming we call the values be acting on operands.

For example,

let result = 5 + 2;

Here,

• ‘+’ is the operator

• ‘5’ and ‘2’ are the operands.

• Here the value of the result will be 7.

Let’s look the types of operators in JavaScript.

Types Of Operators in JavaScript

There are various operator supported by the JavaScript, that are

• Arithmetic Operator

• Assignment Operators

• Comparison Operator

• Logical Operator

• Bitwise Operator

• Ternary Operator

• Unary Operator

• Comma Operator

• Relation Operator

• BigInt Operator

Arithmetic Operator

Arithmetic Operator are the operators that take numerical value as input and gives another numerical value as output. It is used to perform addition, subtraction, multiplication etc.

Here we use,

• + for add two values.

• - for subtracts two values.

• * used for multiplication

• / used for division

• % is Modulus operator, used to calculate reminders

const sum = 5 + 2; // Addition
console.log(sum); 

const sub = 5 - 2; // Substaction
console.log(sub);

const multi = 5 * 2; // Multiplication
console.log(multi);

const divi = 5 / 2; // Division
console.log(divi);

const module = 5 % 3; // Modulus
console.log(module);

Output

7
3
10
2.5
2

Assignment Operator

Assignment operator are used to assign values to the left operand based on the right operand. The simple assignment operator is Equal(=) operator which assign the value of its right operand to its left operand. They can also perform addition and multiplication on the time of the assignment.

Here are few assignment operators,

Name	Shorthand operator	Meaning
Assignment	x = y	x = y
Addition Assignment	x += y	x = x + y
Subtraction Assignment	x -= y	x = x - y
Multiplication Assignment	x *= y	x = x * y
Division Assignment	x /= y	x = x / y
Remainder Assignment	x %= y	x = x % y
Exponentiation Assignment	x **= y	x = x ** y

let name = "Arka";
let num = 0;
num *= 10;
num += 5;
console.log(name);
console.log(num);

Output

Arka
5

Comparison Operator

The comparison operator compares values and returns a boolean value. The operands can be numerical, boolean, string or objects value. Strings are compared based on standard lexicographical ordering, using Unicode values. If two operand are not in same type then the JavaScript try to convert them into same type and then compares.

Operator	Description	Example
Equal (==)	Returns true when both operand value are equal.	3 == 3
3 == ‘3’
3 == “3”
Not equal (!=)	Returns true when both of the operand values are not equal.	5 != 4
Strict Equal (===)	Returns true when the operand value and datatype both are equal.	5 === 5
Strict Not Equal (!==)	Return true when either the values or the datatype of the operands are not equal.	5 !== 4
5 !== ‘5’
Greater than ( > )	Returns true when the left operand value is greater than right operand value.	5 > 2
Greater than Equal ( >=)	Returns true when the left operand value is greater than or equal to right operand value.	5 >= 2
5 >= 5
Less than ( < )	Returns true when the left operand value is less than the right operand value.	5 < 7
Less than Equal (<=)	Returns true when the left operand value is less than or equal to right operand value.	5 <= 7
5 <= 5

console.log(10 === 5);
console.log(10 === '10');
console.log(10 > 5);
console.log(5 < 7);
console.log(10 < 2);

Output

false
false
true
true
false

Logical Operator

Logical operator are typically used boolean values and return a boolean value. It determines the equality or difference between the values.

Operator	Use	Description
Logical AND (&&)	case1&& case2	Return true if both of the case is true.
Logical OR (		)
Logical NOT (!)	!case1	Return false when case1 is true and vice versa.
Nullish Coalescing Operator (??)	case1??case2	Return case1 if it is neither null nor undefined otherwise return case2.

const a = true, b = false;
console.log(a && b); // Logical AND
console.log(a || b); // Logical OR

Output

false
true

Bitwise Operator

A bit wise operator treats there operands as a 32 bits, rather than numbers like decimal, hexadecimal or octal. It performs operation on binary representation of numbers.

Operator	Use	Description
Bitwise AND (&)	a & b	Calculate every bit of a corresponding to b. Returns one if both of them are one.
Bitwise OR (	)	a
Bitwise XOR (^)	a ^ b	Calculate every bit of a corresponding to b. Returns one if both of them are different from each other.
Bitwise NOT(~)	~a	Returns the opposite value.
Left Shift ( << )	a << b	Shift a in binary representation b bits to left. Shifting in zeros from right.
Right Shift ( >> )	a >> b	Shift a in binary representation b bits to right. Shifting in zeros from left.
Zero fill shift ( >>> )	a >>> b	Shifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.

console.log(5 & 1);
console.log(5 | 0);
console.log(5 ^ 1);
console.log(~5);
console.log(5 << 1);
console.log(5 >> 1);
console.log(5 >>> 1);

Output

1
5
4
-6
10
2
2

Ternary Operator

It is a short hand condition statement. It takes three operands. The operator can have one of two values based on a condition. The syntax is:

condition ? val1 : val2

If the condition is true then it got the value of the val1 otherwise val2.

let grade = 95;
const status = grade >= 35 ? "Pass" : "Fail";
console.log(status);

Here the value of grade in 95 which is greater than 35 so the output is:

Pass

let grade = 25;
const status = grade >= 35 ? "Pass" : "Fail";
console.log(status);

Here the value of grade in 25 which is less than 35 so the output is:

Fail

Unary Operator

It is the operator with single operand. Mostly two operator we use that are

• ++ increments the value by 1.

• -- decrements the value by 1.

Here we have pre increment and post increment

let ele = 10;
console.log(ele++);

This is an example of post increment where first we print the value of ele and then we increment its value by one. So the output is:

10

let ele = 10;
console.log(++ele);

This is an example of pre increment where first we increment the ele value by one then we print it. So, the output is:

11

Same thing happens for the decrement operator also.

Comma Operator

The comma operator evaluates its operands from left to right and returns the value of the right most operand.

let a, b;
const res = (a = 6, b = 9, b - a);
console.log(res);

Output:

3

Relation Operator

This operator compares both of its operand and determined the relationship between them. Then returns a boolean value based on this.

There are mainly 2 operators:

in

It is used to check whether the property exist in the object or not.

The syntax is:

propertyName in ObjName

const obj = {
    fname: "Arka",
    age: 20,
}

console.log("fname" in obj);

The fname is already present in the obj. So the output is:

true

instanceof

It is used to check the object is an instance of a constructor or not.

The syntax is:

object instanceof objectType

const obj = new Map();
if (obj instanceof Map) {
    console.log("I am here!!");
}

Output:

I am here!!

BigInt Operator

This operator allows to calculate the big numbers., beyond safe integer limits.

let num1 = 564894156178941564784564987456n;
let num2 = 219845649784568479845467864155n;

console.log(num1 + num2);

Output:

784739805963510044630032851611n

Final Thoughts

JavaScript operators are essential for writing functional programs. They allow you to perform calculations, compare values, and control program logic. Once you become comfortable with these basics, you’ll find it much easier to build real JavaScript applications. Start experimenting with these operators in your browser console or code editor to get hands-on practice.

That's it now you understand operators in JavaScript. I’d love to hear your thoughts and feedback on the comment section.

Thank You for your patients. ❤️