Advertisement

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.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.