Operators in JavaScript, are used to perform some mathematical or logical manipulations. There are following types of operators available in JavaScript:
JavaScript arithmetic operators are used to perform arithmetical task. Here, the following table lists the arithmetic operators available in JavaScript:
| Operator | Meaning |
|---|---|
| + | This operator adds two operands |
| - | This operator subtracts second operand from the first |
| / | This operator divide numerator by denominator |
| * | This operator multiply both operands |
| % | This is a modulus operator, used to calculate the remainder |
| -- | This is a decrement operator, decreases integer value by one |
| ++ | This is a increment operator, increases integer value by one |
Important - JavaScript addition operator (+) works for numeric as well as strings. For example, "a" + 20 will give "a20"
Here is an example, uses all JavaScript arithmetic operators:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Arithmetic Operators Example</title>
<script type="text/javascript">
function operator_fun1()
{
var num1 = 22;
var num2 = 10;
var res;
res = num1 + num2;
document.getElementById("operator_sp1").innerHTML = res;
res = num1 - num2;
document.getElementById("operator_sp2").innerHTML = res;
res = num1 * num2;
document.getElementById("operator_sp3").innerHTML = res;
res = num1 / num2;
document.getElementById("operator_sp4").innerHTML = res;
res = num1 % num2;
document.getElementById("operator_sp5").innerHTML = res;
res = ++num1;
document.getElementById("operator_sp6").innerHTML = res;
res = --num1
document.getElementById("operator_sp7").innerHTML = res;
res = num1++;
document.getElementById("operator_sp8").innerHTML = res;
res = num1--;
document.getElementById("operator_sp9").innerHTML = res;
}
</script>
</head>
<body>
<p>
<span id="operator_sp1">Output 1</span><br/>
<span id="operator_sp2">Output 2</span><br/>
<span id="operator_sp3">Output 3</span><br/>
<span id="operator_sp4">Output 4</span><br/>
<span id="operator_sp5">Output 5</span><br/>
<span id="operator_sp6">Output 6</span><br/>
<span id="operator_sp7">Output 7</span><br/>
<span id="operator_sp8">Output 8</span><br/>
<span id="operator_sp9">Output 9</span>
</p>
<input type="button" onclick="operator_fun1()" value="Click Here" />
</body>
</html>
Here is the output produced by the above JavaScript Arithmetic Operator example program. This is the initial output:
Now click on the Click Here button, you will watch the output as shown in the following snapshot:
Here is the live demo output of the above arithmetic operators example code in JavaScript.
Output 1
Output 2
Output 3
Output 4
Output 5
Output 6
Output 7
Output 8
Output 9
Assignment operators in JavaScript, are used to assign the values of right side operand to the left side operand. Here, this table lists the assignment operators available in JavaScript:
| Operator | Meaning |
|---|---|
| = | This operator Assigns values from the right side operands to left side operand |
| -= | This operator subtracts right operand from the left operand and assign the result to the left operand |
| += | This operator adds right operand to the left operand and assign the result to the left operand |
| /= | This operator divides left operand with the right operand and assign the result to the left operand |
| *= | This operator multiplies right operand with the left operand and assign the result to the left operand |
| %= | This operator takes modulus using two operands and assign the result to the left operand |
JavaScript typeof operators helps in finding the type of JavaScript variable. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Operators Example</title>
</head>
<body>
<p id="operator_para2"></p>
<script>
document.getElementById("operator_para2").innerHTML = typeof "Sagar" + "<br>" +
typeof 3.14 + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'Sagar', age:19};
</script>
</body>
</html>
Here is the output produced by the above JavaScript typedef example program.
To learn about all these data types, refer JavaScript Data Types tutorial.
Conditional operators in JavaScript, are used to assign a value to a variable based on some condition. Here is the general form to use JavaScript conditional operators:
variable_name = (condition) ? value1:value2
Let's look at the following example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Operators Example</title>
</head>
<body>
<p>Enter your Marks in Computer out of 100</p>
<input id="mark" value="79" />
<button onclick="operator_fun3()">Remarks ?</button>
<p id="operator_para3"></p>
<script>
function operator_fun3()
{
var mark, remark;
mark = document.getElementById("mark").value;
remark = (mark < 80) ? "You have to do hard work for improving your performance":"Good, keep it up";
document.getElementById("operator_para3").innerHTML = remark;
}
</script>
</body>
</html>
Here is the output produced by the above JavaScript conditional operator or ternary operator example program. This is the initial output:
Now click on the Remarks ? button, you will watch the output as shown in the figure given below:
Here is the live demo output of the above ternary operator example code in JavaScript.
Enter your Marks in Computer out of 100
Bit operators in JavaScript, work on 32-bit numbers. Any numeric operand in the operation is converted into a 32-bit number. Let's look at the following table, lists bitwise operators available in JavaScript with examples:
| Operator | Name | Expression | is same as | Result | In Decimal |
|---|---|---|---|---|---|
| | | OR | x = 5 | 1 | 0101 | 0001 | 0101 | 5 |
| & | AND | x = 5 & 1 | 0101 & 0001 | 0001 | 1 |
| ^ | XOR | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| ~ | NOT | x = ~ 5 | ~0101 | 1010 | 10 |
| >> | Right shift | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| << | Left shift | x = 5 << 1 | 0101 << 1 | 1010 | 10 |
The following table describes the operators in the decreasing order of their precedence:
| Operator Name | Operator |
|---|---|
| Highest Precedence | |
| member operator | . [] |
| new operator | new |
| function call operator | () |
| increment operator | ++ |
| decrement operator | -- |
| logical NOT operator | ! |
| bitwise NOT operator | ~ |
| unary plus operator | + |
| unary negation operator | - |
| typedef operator | typedef |
| void operator | void |
| delete operator | delete |
| multiplication operator | * |
| division operator | / |
| modulus operator | % |
| addition operator | + |
| subtraction operator | - |
| bitwise shift operator | << >> >>> |
| relational operator | < <= > >= |
| in operator | in |
| instanceof operator | instanceof |
| equality operator | == != === !== |
| bitwise AND operator | & |
| bitwise XOR operator | ^ |
| bitwise OR operator | | |
| logical AND operator | && |
| logical OR operator | || |
| conditional operator | ?: |
| assignment operator | = += -= *= /= %= <<= >>= >>>= &= ^= |= |
| comma operator | , |
| Lowest Precedence | |