Javascript Arithmetic Operators

Arithmetic operators are used for operations between numeric values, either literals or variables.

	Operator	Description
	+		Addition
	-		Subtraction
	*		Multiplication
	/		Division
	%		Modulus
	++		Increment
	--		Decrement

Arithmetic Operations

Most of arithmetic operations require two numbers.
Two numbers can be literals, variables, expressions or combination of all.

Example

	var x = 100 + 50;
	var x = a + b;
	var x = (100 + 50) * a;

Operators and Operands

The numbers is call operands.
The operation to be performed between two operands is defined by operators

Operand Operator    Operand
100 	+   		50

The addition operator (+) adds two or more numbers:

Adding

<!DOCTYPE html>
<html>
<body>

<h1>The + Operator</h1>

	var sub1 = 95;<br />
	var sub2 = 85;<br />
	var tot_marks = sub1 + sub2; <br />
	
<p id="addition"></p>

<script>
var sub1 = 95;
var sub2 = 85;
var tot_marks = sub1 + sub2; 
document.getElementById("addition").innerHTML = tot_marks;
</script>

</body>
</html>

Download the code
Run the code

The subtraction operator (-) subtracts two or more numbers:

Subtracting

<!DOCTYPE html>
<html>
<body>

<h1>The - Operator</h1>

	var sub1 = 95;<br />
	var negetive = 10;<br />
	var tot_marks = sub1 - negetive; <br />
	
<p id="subtract"></p>

<script>
	var sub1 = 95;
	var negetive = 10;
	var tot_marks = sub1 - negetive; 
document.getElementById("subtract").innerHTML = tot_marks;
</script>

</body>
</html>

Download the code
Run the code

The multiplication operator (*) multiplies two or more numbers:

Multiplying

<!DOCTYPE html>
<html>
<body>

<h1>The * Operator</h1>

	var tot_example = 5;<br />
	var example_val = 10;<br />
	var tot_marks = tot_example * example_val; <br />
	
<p id="subtract"></p>

<script>
	var tot_example = 5;
	var example_val = 10;
	var tot_marks = tot_example * example_val; 
document.getElementById("subtract").innerHTML = tot_marks;
</script>

</body>
</html>

Download the code
Run the code

The division operator (/) divides two or more numbers:

Dividing

<!DOCTYPE html>
<html>
<body>

<h1>The / Operator</h1>

	var sub1 = 85;<br>
	var sub2 = 90;<br>
	var sub3 = 95;<br>
	var avg = (sub1 + sub2 + sub3) / 3;
	
<p id="divide"></p>

<script>
	var sub1 = 85;
	var sub2 = 90;
	var sub3 = 95;
	var avg = (sub1 + sub2 + sub3) / 3; 
document.getElementById("divide").innerHTML = avg;
</script>

</body>
</html>

Download the code
Run the code

The modular operator (%) returns remainder after division:

Modulus

<!DOCTYPE html>
<html>
<body>

<h1>The % Operator</h1>

	var sub1 = 85;<br >
	var sub2 = 83;<br >
	var remaining = (sub1 + sub2) % 10; <br >
	
<p id="modulas"></p>

<script>
	var sub1 = 85;
	var sub2 = 83;
	var remaining = (sub1 + sub2) % 10; 
document.getElementById("modulas").innerHTML = remaining;
</script>

</body>
</html>

Download the code
Run the code

The increment operator increase value by 1

Increment

<!DOCTYPE html>
<html>
<body>
	<h1>The ++ Operator</h1>
	<p id="desc"></p>
	<script>
		var x = 5;
		x++;
		var z = x;
		document.getElementById("desc").innerHTML = z;
	</script>
</body>
</html>

Download the code
Run the code

The decrement operator decrease value by 1

Decrement

<!DOCTYPE html>
<html>
<body>

<h1>The -- Operator</h1>

<p id="desc"></p>

<script>
var x = 5;
x--;
var z = x;
document.getElementById("desc").innerHTML = z;
</script>

</body>
</html>

Download the code
Run the code

Operator Precedence

It defines order of operations in an arithmetic operation

<!DOCTYPE html>
<html>
<body>
	<p>Multiplication and division operator has higher precedence than addition and subtraction.</p>
	<p id="demo"></p>
	<script>
	document.getElementById("demo").innerHTML = 100 + 50 * 3;
	</script>
</body>
</html>

Download the code
Run the code

In above example what will happen first 100+50=150 or 50 * 3 = 150?
What operator performed first addition or multiplication

Multiplication and division operator has higher precedence than addition and subtraction.
If precedence is same for more than one operator then it will computed from left to right

<!DOCTYPE html>
<html>
<body>

<p>When many operations has the same precedence, they are computed from left to right.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 200 + 100 - 50;
</script>

</body>
</html>

Download the code
Run the code

Precedence can be changed by putting expression within parenthesis.

<!DOCTYPE html>
<html>
<body>

<p>Multiplication has precedence over addition.</p>
<p>But parenthesis has precedence over multiplication.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = (200 + 10) * 5;
</script>

</body>
</html>

Download the code
Run the code

Operation within parenthesis are computed first and then it continues as per order of precedence.

<<< Javascript typeof OperatorJavascript Assignment >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .