Javascript Arithmetic Operators

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

Operator	Description
-		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

<!DOCTYPE html>
<html>
<body>

<h1>The + Operator</h1>

var sub1 = 95;<br />
var sub2 = 85;<br />
var tot_marks = sub1 + sub2; <br />

<script>
var sub1 = 95;
var sub2 = 85;
var tot_marks = sub1 + sub2;
</script>

</body>
</html>

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>

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>

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>

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>

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>

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>

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>

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>

Run the code

Precedence can be changed by putting expression within parenthesis.

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>