JavaScript - SPLessons

JavaScript Operators

Chapter 6

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

JavaScript Operators

JavaScript Operators

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

Arithmetic Operators

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

shape 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

shape Examples

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

Output:

Assignment Operators

shape Description

Assignment operators are used to assign values to the variables.

shape 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


shape Examples


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>

Output

Bitwise Operators

shape 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 “>>

shape 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

shape Example

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

Output

Comparison Operators

shape Description

Comparison operators are used to compare two variables in JavaScript Operators.

shape 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

shape Example

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

Output

Logical Operators

shape Description

Logical operators are used to perform logical operations on given expressions.

shape 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

shape Example

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

Output

Summary

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