Home » JavaScript » JavaScript Operators

JavaScript Operators

JavaScript Operators are symbols that have a special meaning which make JavaScript engine to perform some action on operands. For example: the addition + symbol is an operator means to add two variables or values, while the equal-to ==, greater-than > or less-than < symbols used to compare two variables or values.

There are following types of operators in JavaScript.

Arithmetic operators
Comparison operators
Assignment operators
Logical operators
String operators
Bitwise Operators
Special operators

Arithmetic Operators

The Arithmetic operators are used to perform arithmetic operations, like addition, subtraction, multiplication, etc.

Here's a complete list of JavaScript's arithmetic operators:

Operator Name	Operator	Example
Addition	+	10 + 20 = 30
Subtraction	-	20 - 10 = 10
Multiplication	*	10 * 5 = 50
Division	/	50 / 5 = 10
Modulus (Remainder)	%	20 % 2 = 0

Note : The + operator can also be used to add (concatenate) strings.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Arithmatic Operator </title>
</head>
<body>
<script>
var x = 25;
var y = 5;
document.write(x + y); // Prints: 30
document.write("<br>");
document.write(x - y); // Prints: 20
document.write("<br>");
document.write(x * y); // Prints: 125
document.write("<br>");
document.write(x / y); // Prints: 5
document.write("<br>");
document.write(x % y); // Prints: 0
</script>
</body>
</html>

Output

JavaScript Arithmatic Operator

Comparison Operators

The comparison operators are used to compare two values (number or string):

Operator Name	Operator	Example
Equal to	==	10 == 20 = false
Identical (equal and of same type)	===	10 === 20 = false
Not equal	!=	10 != 20 = true
Not Identical	!==	20 !== 20 = false
Greater than	>	20 < 10 = true
Less than	<	20 > 10 = false
Greater than or equal to	>=	20 >= 10 = true
Less than or equal to	<=	20<=10 = false

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Comparison Operator </title>
</head>
<body>
<script>
var a = 25;
var b = 35;
var c = "25";
document.write(a == c); // Prints: true
document.write("<br>");
document.write(a === c); // Prints: false
document.write("<br>");
document.write(a != b); // Prints: true
document.write("<br>");
document.write(a !== c); // Prints: true
document.write("<br>");
document.write(a < b); // Prints: true
document.write("<br>");
document.write(a > b); // Prints: false
document.write("<br>");
document.write(a <= b); // Prints: true
document.write("<br>");
document.write(a >= b); // Prints: false
</script>
</bodb>
</html>

Output

JavaScript Comparison Operator

Assignment Operator

The Assignment operators '=' is used with numeric values to assign a value to a variable.There are various ways to assign a value to a variable-

Operator	Same as..	Use for
x = y	x = y	Assign
x += y	x = x + y	Addition
x -= y	x = x - y	Subtraction
x *= y	x = x * y	Multiplication
x /= y	x = x / y	Division
x %= y	x = x % y	Modulus

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Assignment Operator </title>
</head>
<body>
<script>
var x; // Declaring Variable
x = 10;
document.write(x + "<br>"); // Prints: 10
x = 20;
x += 30;
document.write(x + "<br>"); // Prints: 50
x = 50;
x -= 20;
document.write(x + "<br>"); // Prints: 30
x = 5;
x *= 25;
document.write(x + "<br>"); // Prints: 125
x = 50;
x /= 10;
document.write(x + "<br>"); // Prints: 5
x = 100;
x %= 15;
document.write(x); // Prints: 10
</script>
</body>
</html>

Output

JavaScript Assignment Operator

Logical Operators

The logical operators are used to combine conditional statements. Suppose we have two conditional statements 'x' and 'y':-

Operator Name	Operator	Use
Logical AND	&&	True if both x and y are true
Logical OR	\|\|	True if either x or y is true
logical Not	!	True if x is not true

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Logical Operator </title>
</head>
<body>
<script>
var year = 2020;
// Leap years are divisible by 400 or by 4 but not 100
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
document.write(year + " is a leap year.");
} else{
document.write(year + " is not a leap year.");
}
</script>
</body>
</html>

Output

JavaScript Logical Operator

String Operators

There are two operators which can also used be for strings.

Operator Name	Operator	Use
Concatenation	+	Appends str2 to str1.
Concatenation assignment	+=	Appends str2 to the str1.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript String Operator </title>
</head>
<body> <script>
var str1 = "Hello";
var str2 = " JavaScript!";
document.write(str1 + str2 + "<br>"); // Outputs: Hello JavaScript!
str1 += str2;
document.write(str1); // Outputs: Hello JavaScript!
</script>
</body>
</html>

Output

JavaScript String Operator

Increment and Decrement Operators

The increment/decrement operators are used to increment/decrement a variable's value by '1'.

Operator Name	Operator	Use
Pre-increment	++x	Increments x by one, then returns x
Post-increment	x++	Returns x, then increments x by one
Pre-decrement	--x	Decrements x by one, then returns x
Post-decrement	x--	Returns x, then decrements x by one

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Increment / Decrement Operator </title>
</head>
<body>
<script>
var x; // Declaring Variable
x = 20;
document.write(++x); // Prints: 21
document.write("<p>" + x + "</p>"); // Prints: 21
x = 20;
document.write(x++); // Prints: 20
document.write("<p>" + x + "</p>"); // Prints: 21
x = 20;
document.write(--x); // Prints: 19
document.write("<p>" + x + "</p>"); // Prints: 19
x = 20;
document.write(x--); // Prints: 20
document.write("<p>" + x + "</p>"); // Prints: 19
</script>
</body>
</html>

Output

JavaScript Increment / Decrement Operator

Bitwise Operators

The bitwise operators perform bitwise operations on operands.

Operator	Operator Name	Example	Same as (Binary)	Result	Decimal
&	Bitwise AND	5 & 1	0101 & 0001	0001	1
\|	Bitwise OR	5 \| 1	0101 \| 0001	0101	5
~	Bitwise Not	~ 5	~ 0101	1010	10
^	Bitwise XOR	5 ^ 1	0101 ^ 0001	0100	4
<<	Bitwise Left Shift	5 << 1	0101 << 0001	1010	10
>>	Bitwise Right Shift	5 >> 1	0101 >> 0001	0010	2
>>>	Bitwise Zero Right Shift	5 >>> 1	0101 >>> 0001	0010	2

Special Operators

The following operators are known as JavaScript special operators.

Operator	Description
,	It allows multiple expressions to be evaluated as single statement.
yield	This operator checks what is returned in a generator by the generator's iterator.
(?:)	Conditional Operator returns value based on the condition. It can be used in place of 'if' statement.
in	It checks if object has the given property.
delete	It deletes a property from the object.
instanceof	Checks if the object is an instance of given type.
void	It discards the expression's return value.
typeof	Checks the type of object.

Recommended :

1 . Types of Operators in JavaScript
2 . If Statements in JavaScript
3 . Functions in JavaScript
4 . innerHTML Usage

5 . Type Conversion
6 . All reserved keywords in JavaScript
7 . BootStrap 4 Photography Snippets
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors