Description
JavaScript Operators are symbols that tells the compiler to perform either mathematical or logical operation on a variable or value. In simplistic terms, operators define how actions on variables and values should be performed. JavaScript language supports rich set of built-in operators. The current chapter explains about different types of JavaScript Operators.
Description
Addition, subtraction, multiplication, division, and modulus operators are the mathematical calculations performed using Arithmetic operators. Let us perform Arithmetic operation by taking x value as 10 and y value as 20.
Operators
| Operator | Description | Example |
|---|---|---|
| + | Adds two operands | x+y gives 30 |
| - | Subtracts second operand from the first | x-y gives -10 |
| * | Multiplies operands | x*y gives 200 |
| / | Divide numerator by denominator | x/y gives 2 |
| % | Modulus operator gives remainder after an integer division | y%x gives 0 |
| ++ | Increment operator: Increases integer value by one | x++ gives 11 |
| -- | Decrement operator: Decreases integer value by one | x-- gives 9 |
Examples
[html]
<!DOCTYPE html>
<html>
<head>
<title> variables test</title>
<h2 style="color:cyan"> Welcome to Splessons</h2>
<p style="color:red">Example for Arithmetic Operator</p>
</head>
<body>
<script type="text/javascript">
var a = 15 + 3;
document.write("<br>Sum is ",a);
var b = 15 - 3;
document.write("<br>Difference is ",b);
var c = 15*3;
document.write("<br>Multiplication value is ",c);
var d = 15/3;
document.write("<br>Division value is ",d);
var e = 15%4;
//alert function creates alert message on the browser
alert(e); //prints 3
</script>
</body>
</html>
[/html]
Output:
Description
Assignment operators are used to assign values to the variables.
Operators
| Operator | Description | Example |
|---|---|---|
| = | Assignment Operator: Assigns right-hand side value (called rvalue) to left-hand side(called lvalue) value. | z=x+y assigns value of x+y into z |
| += | Add AND Assignment Operator: Adds right operand to left operand and assigns the result to left operand. | y+=x is equivalent to x=y+x |
| -= | Subtract AND Assignment Operator: Subtracts right operand from left operand and assigns the result to left operand | y-=x is equivalent to y=y-x |
| *= | Multiply AND Assignment Operator: Multiplies right operand with left operand and assigns the result to left operand | y*=x is equivalent to x=y*x |
| /= | Divide AND Assignment Operator: Divides right operand by left operand and assigns the result to left operand | y/=x is equivalent to x=y/x |
| %= | Modulus AND Assignment Operator: Takes modulus using two operands and assigns the result to left operand | y%=x is equivalent to x=y%x |
| <<= | Left shift AND Assignment Operator | y<<=2 is same as y=y<<2 |
| >>= | Right shift AND Assignment Operator | y>>=2 is same as y=y>>2 |
| &= | Bitwise AND Assignment Operator | y&=2 is same as y=y&2 |
| ^= | Bitwise Exclusive OR and Assignment Operator | y^=2 is same as y=^2 |
| |= | Bitwise Inclusive OR and Assignment Operator | y|=2 is same as y=y|2 |
Examples
[html]
Examples
<!DOCTYPE html>
<html>
<head>
<title> variables test</title>
<h2 style="color:cyan"> Welcome to Splessons</h2>
<p style="color:red">Example for Assignment Operator</p>
</head>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
[/html]
Output
Description
Bitwise operators are used to convert the values into binary digits in JavaScript Operators. Shift operator also comes under Bitwise operator because the shift is done in terms of bits.
Shift Operator: It is used to shift the values to either left or right.
(i) Left -Shift Operator: It moves the bits to left by adding zeros at the right end. It is represented by "<<"
(ii) Right-Shift Operator: It moves the bits to right by adding zeros at the left end. Here, if the value is unsigned, it fills all the bit memory with zeros till the left most bit. If the value is signed, then operator assigns one bit for sign and fills other bits with zeros. It is represented by ">>"
Operators
| Operator | Symbol | Form | Operation |
|---|---|---|---|
| Right shift | >> | x>>y | all bits in x shifted to the right y bits |
| Left shift | << | x<<y | all bits in x shifted to the left y bits |
| Bitwise AND | & | x&y | each bit in x AND each bit in y |
| Bitwise OR | | | x|y | each bit in x OR each bit in y |
| Bitwise XOR | ^ | x^y | each bit in x XOR each bit in y |
| Bitwise NOT | ~ | ~x | all bits in x flipped |
Example
[html]
<!DOCTYPE html>
<html>
<head>
<title> variables test</title>
<h2 style="color:cyan"> Welcome to Splessons</h2>
<p style="color:red">Example for Bitwise Operator</p>
</head>
<body>
<script type="text/javascript">
var a = 5;
var b = 7;
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
[/html]
Output
Description
Comparison operators are used to compare two variables in JavaScript Operators.
Operators
| Operator | Description |
|---|---|
| == | Checks if the value is equal or not. If yes, then returns true. |
| != | Checks if the value is equal or not. If the values are not equal, then the condition becomes true |
| > | Checks for greater value |
| < | Checks for lower value |
| >= | Checks if the value is greater than or equal to the value |
| <= | Checks if the value is less than or equal to the value |
Example
[html]
<!DOCTYPE html>
<html>
<head>
<title> variables test</title>
<h2 style="color:cyan"> Welcome to Splessons</h2>
<p style="color:red">Example for Comparison Operator</p>
</head>
<body>
<script type="text/javascript">
var a = 50;
var b = 25;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
[/html]
Output
Description
Logical operators are used to perform logical operations on given expressions.
Operators
| Operator | Name of Operator | Output |
|---|---|---|
| && | AND Operator | Output is 1 only when conditions on both sides of the operator becomes true |
| || | OR Opeator | Output is 0 only when conditions on both sides of the operator becomes false |
| ! | NOT Operator | Gives inverted output |
Example
[html]
<!DOCTYPE html>
<html>
<head>
<title> variables test</title>
<h2 style="color:cyan"> Welcome to Splessons</h2>
<p style="color:red">Example for Logical Operator</p>
</head>
<body>
<script type="text/javascript">
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
[/html]
Output
Key Points
- JavaScript Operators describe how actions on the variables and values should be performed.
- Mathematical calculations are performed by Arithmetic operators.
- A value can be assigned to the variables using Assignment operator.
- Bitwise Operators are used to convert the values into binary digits.
- Comparison operators are used to compare two variables.