JavaScript Operators

« Previous Tutorial Next Tutorial »

Operators in JavaScript, are used to perform some mathematical or logical manipulations. There are following types of operators available in JavaScript:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical (Relational) Operators

JavaScript Arithmetic Operators

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"

Example

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

JavaScript Assignment Operators

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 Operator

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.

JavaScript Conditional (Ternary) Operator

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

JavaScript Bitwise Operators

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

JavaScript Operator Precedence

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

JavaScript Online Test

« Previous Tutorial Next Tutorial »