7 Common Operators in JavaScript

JavaScript is one of the most important technologies you need to know about if you want to become a full-fledged web developer. You need to be well-versed with concepts like loops, operators, functions, classes, and other similar topics to write web projects.

In Javascript, we make use of operators to assign and compare values. With the help of operators, we can also perform arithmetic operations in JavaScript. Now let’s understand what are operators and the seven most common types of operators used. We will also explain some examples of the operators that will help you understand their functions.

What are operators?

As discussed before, operands help us assign values or perform different operations. In JavaScript, there are unary operators, binary operators, and a ternary operator.

1. Unary Operator

A unary operator takes only one operand. The operand is either placed before or after the operator. For instance, the Postfix increment(x++) and the Prefix increment are unary operators.

2. Binary Operator

The word binary means two values or that two operands are involved. Here one operand comes before and one comes after the operator. For example, the addition of two numbers, 2 + 3, here 2 and 3 are operands, and + is the operator which adds the two numbers.

3. Ternary Operator

Lastly, we have the ternary operator in JavaScript which has three operands. This operator is a shorthand version of the if-else statement. Due to this ternary operator is also called a conditional operator. For example, age>=18? ”Adult”: “Child”, here there are three operands age>=18, “Adult”, “Child” and they are separated by the? and: operators.

Types of Operators

Here are the seven types of operators which are commonly used in JavaScript:

Arithmetic Operators
Assignment Operators
Logical Operators
Comparison Operators
Bitwise Operators
String Operators
Ternary Operators

1. Arithmetic Operators:

As the name suggests, these operators perform arithmetic operations like addition, subtraction, and so on. An arithmetic operator can be either a unary or binary operator. For a unary operator, it takes one numerical value, performs the given operation, and returns the numerical solution.

While for binary operators, it takes two numerical values, performs the given operation, and returns only one numerical solution. Here is the table with some of the most used arithmetic operators:

Operator name	Symbol	Type	Example	Result
Addition	+	Binary Operand	a = 2 + 2	a = 5
Subtraction	–	Binary Operand	a = 2 – 2	a = 0
Multiplication	*	Binary Operand	a = 2 * 2	a = 4
Division	/	Binary Operand	a = 2 / 2	a = 1
Modulus	%	Binary Operand	a = 2 % 2	a = 0
Increment	++	Unary Operand	b =2; a = ++b; a = b++;	a=3, b=3a=2, b=3
Decrement	—	Unary Operand	b =2; a = –b; a = b–;	a=1, b=1a=2, b=1
Expotential	**	Binary Operand	a = 2**3	a=8

2. Assignment Operators:

Assignment operators are binary operators that are used to assign values to variables. This operator assigns the right operand’s value to the left operand. The most common assignment operator is =. For example, x = y, where y is the right operand and its value is assigned to x, the left operand.

There are compound assignment operands, which mainly combined the assignment and arithmetic operation in a shorthand version. For example, x += y is the shorthand version of x = x + y. Here is a table with the most common assignment operators in JavaScript:

Operator Name	Symbol	Shorthand version	Longform version	Example
Assignment	=	x=y	x=y	x=5
Addition assignment	+=	x+=y	x= x+y	x+=5
Subtraction assignment	-=	x-=y	x=x-y	x-=5
Multiplication assignment	*=	x*=y	x=x*y	x*=5
Division assignment	/=	x/=y	x=x/y	x/=5
Remainder assignment	%=	x%=y	x=x%y	x%=5

3. Logical Operators:

A logical operator can be a unary or binary operator. Logical NOT is a unary operator which takes one operand and reverses the value, for example, if the operand is true it makes it false and vice versa. For binary operators, it takes two boolean values, performs the given operation, and returns a single boolean result. Following are the logical operators used in JavaScript:

Operator name	Symbol	Function
Logical AND	&&	Returns true only if both the given operands are true, otherwise returns false.
Logical OR	\|\|	Returns true if both or either one operand is true, else returns false.
Logical NOT	!	Gives the negation of the given value

true && true // true
true && false // false
false && false // false

true || true // true
true || false // true
false || false // false

!true // false
!false // true

4. Comparison Operators

The comparison operators in JavaScript are binary operators. This means that it compares the two given operands and returns a boolean value as the result. Javascript has type conversion which means if you try to compare a string with an integer then JavaScript will try to convert that string into a number to compare it with the integer operand. The strict equal and the strict not equal are the only two comparison operators that do not use type conversion. Here are the comparison operators available in JavaScript:

Operator name	Symbol	Function	Example
Equal	==	Returns true if the operands are equal else false	“2” == 2 // true “2” == 3 // false
Not equal	!=	Returns true if the operands are not equal else false	“2” != 2 // false “2” != 3 // true
Strict equal	===	Returns true if the type, as well as the value of the operands, are equal else false	“2” === 2 // false 2 === 2 // true
Strict not equal	!==	Returns true if the value or the type of the operands are different else false	“2” !== 2 // true 2 !== 3 // true 2 !== 2 // false
Greater than	>	Returns true if the left operand’s value is greater than the right operand else false	2>3 // false 2>2 // false 3>2 // true
Greater than or equal to	>=	Returns true if the left operand’s value is greater than or equal to the right operand else false	2>=3 // false 3>=2 // true 2>=2 // true
Less than	<	Returns true if the left operand’s value is less than the right operand else false	2<3 // true 2<2 // false 3<2 // false
Less than or equal to	<=	Returns true if the left operand’s value is less than or equal to the right operand else false	2<=3 // true 3<=2 // false 2<=2 // true

5. Bitwise Operators

In JavaScript, Bitwise operators perform operations by converting the integers into binary form. These operators work with 32-bit numbers only. The result of the operation is converted back into a decimal number. Here are the bit operators used in JavaScript:

Operator name	Symbol	Example	Conversion	Result	Decimal
AND	&	x = 2 & 1	0010 & 0001	0000	0
OR	\|	x = 2 \| 1	0010 \| 0001	0011	3
NOT	~	x = ~ 2	~0010	1101	13
XOR	^	x = 2 ^ 1	0010 ^ 0001	0011	3
Left Shift	<<	x = 2 << 1	0010<<1	0100	8
Right Shift	>>	x = 2 >> 1	0010>>1	0001	1

6. String Operators

Concatinators or string operators take two strings and combine them into one single string. String operators are binary operators and you need to use the + symbol between the two string operands to concatenate them into a single string. For example,

str1 = "Hello ";
str2 = "World";
res = str1 + str2; // "Hello World"

7. Ternary Operator

The conditional operator or the ternary operator makes use of three operands. It is a shorthand version of the if-else statements, where the first operand is a condition and if it is true then it returns the second operand else if false it returns the third operand. The syntax of the ternary or conditional operator in Javascript is as follows:

Condition? StatementIfTrue: StatementIfFalse

Here is an example of a conditional or ternary operator:

n1 = -20;
res="";
n1>0?res="Positive":res="Negative" // res = "Negative"

Other Operators in JavaScript

Above are the seven most used operators in Javascript. There are many different types of operators other than the ones mentioned above like the typeof, delete, in, void, and instanceof operators available in JavaScript.

1. The typeof Operator

This operator returns a string stating the type of the expression, function, variable, or object. Here are some examples,

typeof 2.333 // returns number
typeof {id: 123, name: "johnny"} // returns object
typeof null // returns object
typeof "Hello" // returns string
typeof myfunc // returns undefined (myfunc is not declared)

2. Delete Operator

This operator is used to delete an object’s property. The delete operator deletes the value as well as the property. Once deleted, the property can not be used unless it has been added back. If used without adding it back, the application will crash. The delete operator can be used only on properties of objects and not on variables or functions. Here is an example of how you can use the delete operator:

const employee = {
empID: 123,
empName: "Johnny English",
empLoc: "UK",
empAge:25
};

delete employee.empAge; // the property empAge is deleted from the object employee

3. In Operator

This operator checks if the given value is a part of the specified object. If it is then the in operator returns true else false. Here are some examples of the in operator in JavaScript:

//Predefined Objects
"length" in String // returns true
"NAN" in Math // returns true

//Objects
const student = {Name:"Ria Doe", Marks:90, Class:10, Address:"USA"};
"Address" in student // return true
"Class" in student // return true

//Arrays
const colors = ["pink","white","black"];
"pink" in colors // return true
2 in colors // return true (index exists)
4 in colors // retuen false (index invalid)
length in colors // return true (length is property of Array)

4. Instanceof Operator

This operator checks if the given object is an instance of the specified object. If it is then we get true, else we get false. Following are some examples to understand the instanceof operator in JavaScript:

const n = [1,2,23,4];
(n instanceof Array) // true
(n instanceof Object) // true
(n instanceof Number) // true
(n instanceof String) // false

5. The void Operator

This operator checks the expression and returns undefined. The void operator is used to get undefined primitive values through “void(0)”.

Conclusion

One needs to learn about the types, syntax, and functions of different operators used in JavaScript, to make their programming skills strong. If you are keen on wanting to understand different concepts of web development then you need to be well-versed with all concepts in JavaScript. By learning about these operators, you are one step closer to creating a concert foundation for JavaScript.