Javascript operators; In this tutorial, you will learn how many types of operators in javascript and how to use javascript operators with examples.
Types of Operators in JavaScript with Example
How many types of operators in javascript:
- Arithmetic Operators
- Comparison Operators
- Logical Operators
- Assignment Operators
- Conditional Operators
Arithmetic Operators
Arithmetic operators are used to performing mathematical operations between numeric operands.
| Operator | Description |
|---|---|
| + | Adds two numeric operands. |
| – | Subtract right operand from left operand |
| * | Multiply two numeric operands. |
| / | Divide left operand by right operand. |
| % | Modulus operator. Returns remainder of two operands. |
| ++ | Increment operator. Increase operand value by one. |
| — | Decrement operator. Decrease value by one. |
Example- JavaScript Arithmetic Operator
The following example demonstrates how arithmetic operators perform different tasks on operands.
<html>
<head>
<title> JavaScript Arithmetic Operator Examples</title>
</head>
<body>
<script>
var x = 5;
var y = 50;
var z = 100;
var newline = "<br />";
document.write("x + y ===output===> ");
output = x + y;
document.write(output);
document.write(newline);
document.write("x - y ===output===> ");
output = x - y;
document.write(output);
document.write(newline);
document.write("x / y ===output===> ");
output = x / y;
document.write(output);
document.write(newline);
document.write("x % y ===output===> ");
output = x % y;
document.write(output);
document.write(newline);
document.write("x + y + z ===output===> ");
output = x + y + z;
document.write(output);
document.write(newline);
x = ++x;
document.write("++x ===output===> ");
output = ++x;
document.write(output);
document.write(newline);
y = --y;
document.write("--y ===output===> ");
output = --y;
document.write(output);
document.write(newline);
</script>
</body>
</html>
Output:
x + y = 55 x - y = -45 x / y = 0.1 x % y = 5 x + y + z = 155 ++x = 7 --y = 48
Note
+ operator performs concatenation operation when one of the operands is contained a string value.
Here, an example shows how + operator performs an operation on operands of different data types.
var a = 50, b = "Hello ", c = 15; a + b; // "5Hello " a + c; // 65
Comparison Operators
JavaScript comparison operators compare two operands value and return the Boolean value true or false.
| Operators | Description |
|---|---|
| == | Compares the equality of two operands without considering type. |
| === | Compares equality of two operands with type. |
| != | Compares inequality of two operands. |
| > | Checks whether left side value is greater than right side value. If yes then returns true otherwise false. |
| < | Checks whether left operand is less than right operand. If yes then returns true otherwise false. |
| >= | Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false. |
| <= | Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false. |
Example – JavaScript Comparison Operators
The following example demonstrates how comparison operators perform different tasks.
<html>
<head>
<title> JavaScript Comparison Operator Examples</title>
</head>
<body>
<script type = "text/javascript">
var x = 50;
var y = 100;
var breakLine = "<br />";
document.write("(x == y) ===output===> ");
output = (x == y);
document.write(output);
document.write(breakLine);
document.write("(x < y) ===output===> ");
output = (x < y);
document.write(output);
document.write(breakLine);
document.write("(x > y) ===output===> ");
output = (x > y);
document.write(output);
document.write(breakLine);
document.write("(x != y) ===output===> ");
output = (x != y);
document.write(output);
document.write(breakLine);
document.write("(x >= y) ===output===> ");
output = (x >= y);
document.write(output);
document.write(breakLine);
document.write("(x <= y) ===output===> ");
output = (x <= y);
document.write(output);
document.write(breakLine);
</script>
</body>
</html>
Output
(x == y) ===output===> false (x < y) ===output===> true (x > y) ===output===> false (x != y) ===output===> true (x >= y) ===output===> false (x <= y) ===output===> true
Logical Operators
Logical operators are used to combine two or more conditions. JavaScript includes the following logical operators.
| Operator | Description |
|---|---|
| && | && is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or “” are considered as zero), if yes then returns 1 otherwise 0. |
| || | || is known as OR operator. It checks whether any one of the two operands is non-zero (0, false, undefined, null or “” is considered as zero). |
| ! | ! is known as NOT operator. It reverses the boolean result of the operand (or condition) |
Example – JavaScript Logical Operators
<html>
<head>
<title> JavaScript Logical Operator Examples</title>
</head>
<body>
<script type = "text/javascript">
var x = 50;
var y = 100;
var breakLine = "<br />";
document.write("(x && y) ===output===> ");
output = (x && y);
document.write(output);
document.write(breakLine);
document.write("(x || y) ===output===> ");
output = (x || y);
document.write(output);
document.write(breakLine);
document.write("!(x && y) ===output===> ");
output = (!(x && y));
document.write(output);
document.write(breakLine);
</script>
</body>
</html>
Output
(x && y) ===output===> 100 (x || y) ===output===> 50 !(x && y) ===output===> false
Assignment Operators
JavaScript includes assignment operators to assign values to variables with fewer keystrokes.
| Assignment operators | Description |
|---|---|
| = | Assigns right operand value to left operand. |
| += | Sums up left and right operand values and assign the result to the left operand. |
| -= | Subtract right operand value from left operand value and assign the result to the left operand. |
| *= | Multiply left and right operand values and assign the result to the left operand. |
| /= | Divide left operand value by right operand value and assign the result to the left operand. |
| %= | Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand. |
Example – Assignment operators
<html>
<head>
<title> JavaScript Assignment Operator Examples</title>
</head>
<body>
<script type = "text/javascript">
var x = 50;
var y = 100;
var breakLine = "<br />";
document.write("Value of a ===output===> (x = y) ===output===> ");
output = (x = y);
document.write(output);
document.write(breakLine);
document.write("Value of a ===output===> (x += y) ===output===> ");
output = (x += y);
document.write(output);
document.write(breakLine);
document.write("Value of a ===output===> (x -= y) ===output===> ");
output = (x -= y);
document.write(output);
document.write(breakLine);
document.write("Value of a ===output===> (x *= y) ===output===> ");
output = (x *= y);
document.write(output);
document.write(breakLine);
document.write("Value of a ===output===> (x /= y) ===output===> ");
output = (x /= y);
document.write(output);
document.write(breakLine);
document.write("Value of a ===output===> (x %= y) ===output===> ");
output = (x %= y);
document.write(output);
document.write(breakLine);
</script>
</body>
</html>
Output
Value of a ===output===> (x = y) ===output===> 100 Value of a ===output===> (x += y) ===output===> 200 Value of a ===output===> (x -= y) ===output===> 100 Value of a ===output===> (x *= y) ===output===> 10000 Value of a ===output===> (x /= y) ===output===> 100 Value of a ===output===> (x %= y) ===output===> 0
Ternary Operator
Does JavaScript include a special operator called ternary operator:? that assigns a value to a variable based on some condition. This is like a short form of the if-else condition.
In other words, The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if-else statement.
Syntax:
<condition> ? <value1> : <value2>;
Does the ternary operator start with conditional expression followed by? operator. The second part ( after ? and before: operator) will be executed if the condition turns out to be true. If the condition becomes false then the third part (after 🙂 will be executed.
Example – JavaScript Ternary operator
var a = 10, b = 5; var c = a > b? a : b; // value of c would be 10 var d = a > b? b : a; // value of d would be 5
Conclusion
In this tutorial, you have learned javascript operators with examples.
Recommended JavaScript Tutorials
Recommended:-JavaScript Error Types
Recommended:-JavaScript Create & Call Functions with Example
Recommended:-JavaScript try…catch Statement
Recommended:-JavaScript Pass by Value and Pass by Reference
Recommended:-JavaScript Arrays
Recommended:-JavaScript: Array Methods
Recommended:-JavaScript Array filter| Filtering Items From Array
Recommended:-javaScript Sum Array Object Values – Examples
Recommended:-JavaScript Array splice() Method By Example
Recommended:-Sorting Using JavaScript Array Sort() Method
Recommended:-JavaScript Array Contains | Array include() Mehtod
