Advertisement


JavaScript Operators

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.

<!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

<!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

<!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

<!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.

<!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

<!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.




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »