JavaScript Arithmetic
JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).| Operator | Description |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| / | Division |
| % | Modulus |
| ++ | Increment |
| -- | Decrement |
Arithmetic Operations
A typical arithmetic operation operates on two numbers.The two numbers can be literals:
Example1
<html><body>
<p>A typical arithmetic operation takes two numbers and produces a new number.</p>
<p id="demo"></p>
<script>
var x = 100 + 50;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Example2
<!DOCTYPE html><html>
<body>
<p>A typical arithmetic operation takes two numbers (or variables) and produces a new number.</p>
<p id="demo"></p>
<script>
var a = 100;
var b = 50;
var x = a + b;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Example3
<!DOCTYPE html><html>
<body>
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>
<p id="demo"></p>
<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Operators and Operands
The numbers (in an arithmetic operation) are called operands.The operation (to be performed between the two operands) is defined by an operator.
| Operand | Operator | Operand |
|---|---|---|
| 100 | + | 50 |
Adding
<!DOCTYPE html><html>
<body>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Subtracting
<!DOCTYPE html>
<html>
<body>
<h2>The - Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x - y;
document.getElementById("demo").innerHTML = z
</script>
</body>
</html> Multiplying
<!DOCTYPE html>
<html>
<body>
<h2>The * Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>Dividing
<!DOCTYPE html><html>
<body>
<h2>The / Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Modulus
<!DOCTYPE html><html>
<body>
<h2>The % Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x % y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Incrementing
<!DOCTYPE html><html>
<body>
<h2>The ++ Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
x++;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Decrementing
<!DOCTYPE html><html>
<body>
<h2>The -- Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
x--;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic expression.Example
var x = 100 + 50 * 3; Is the addition or the multiplication done first?
As in traditional school mathematics, the multiplication is done first.
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
And (as in school mathematics) the precedence can be changed by using parentheses:
Example
var x = (100 + 50) * 3; When many operations have the same precedence (like addition and subtraction), they are computed from left to right:
Example
var x = 100 + 50 - 3; JavaScript Operator Precedence Values
| Value | Operator | Description | Example |
|---|---|---|---|
| 19 | ( ) | Expression grouping | (3 + 4) |
| 18 | . | Member | person.name |
| 18 | [] | Member | person["name"] |
| 17 | () | Function call | myFunction() |
| 17 | new | Create | new Date() |
| 16 | ++ | Postfix Increment | i++ |
| 16 | -- | Postfix Decrement | i-- |
| 15 | ++ | Prefix Increment | ++i |
| 15 | -- | Prefix Decrement | --i |
| 15 | ! | Logical not | !(x==y) |
| 15 | typeof | Type | typeof x |
| 14 | * | Multiplication | 10 * 5 |
| 14 | / | Division | 10 / 5 |
| 14 | % | Modulo division | 10 % 5 |
| 14 | ** | Exponentiation | 10 ** 2 |
| 13 | + | Addition | 10 + 5 |
| 13 | - | Subtraction | 10 - 5 |
| 12 | << | Shift left | x << 2 |
| 12 | >> | Shift right | x >> 2 |
| 12 | >>> | Shift right (unsigned) | x >>> 2 |
| 11 | < | Less than | x < y |
| 11 | <= | Less than or equal | x <= y |
| 11 | > | Greater than | x > y |
| 11 | >= | Greater than or equal | x >= y |
| 10 | == | Equal | x == y |
| 10 | === | Strict equal | x === y |
| 10 | != | Unequal | x != y |
| 10 | !== | Strict unequal | x !== y |
| 6 | && | Logical and | x && y |
| 5 | || | Logical or | x || y |
| 3 | = | Assignment | x = y |
| 3 | += | Assignment | x += y |
| 3 | -= | Assignment | x -= y |
| 3 | *= | Assignment | x *= y |
| 3 | %= | Assignment | x %= y |
| 3 | <<= | Assignment | x <<= y |
| 3 | >>= | Assignment | x >>= y |
| 3 | >>>= | Assignment | x >>>= y |
| 3 | &= | Assignment | x &= y |
| 3 | ^= | Assignment | x ^= y |
| 3 | |= | Assignment | x |= y |
Pale red entries indicates experimental or proposed technology (ECMAScript 2016 or ES7)
Expressions in parentheses are fully computed before the value is used in the rest of the expression.
