JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).
| Operator | Description |
|---|---|
| + | Addition |
| – | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Remainder) |
| ++ | Increment |
| — | Decrement |
Arithmetic Operations
A typical arithmetic operation operates on two numbers.
The two numbers can be literals:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<p>A typical arithmetic operation takes two numbers and produces a new number.</p>
<p id="demo"></p>
<script>
let x = 100 + 50;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
A typical arithmetic operation takes two numbers and produces a new number.
150
or variables:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<p>A typical arithmetic operation takes two numbers (or variables) and produces a new number.</p>
<p id="demo"></p>
<script>
let a = 100;
let b = 50;
let x = a + b;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
A typical arithmetic operation takes two numbers (or variables) and produces a new number.
150
or expressions:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2><p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>
<p id="demo"></p>
<script>
let a = 3;
let x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
A typical arithmetic operation takes two numbers (or expressions) and produces a new number.
450
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
The addition operator (+) adds numbers:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The + Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The + Operator
7
Subtracting
The subtraction operator (-) subtracts numbers.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The - Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The – Operator
3
Multiplying
The multiplication operator (*) multiplies numbers.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The * Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The * Operator
10
Dividing
The division operator (/) divides numbers.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The / Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The / Operator
2.5
Remainder
The modulus operator (%) returns the division remainder.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The % Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x % y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The % Operator
1
In arithmetic, the division of two integers produces a quotient and a remainder.
In mathematics, the result of a modulo operation is the remainder of an arithmetic division.
Incrementing
The increment operator (++) increments numbers.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The ++ Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
x++;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The ++ Operator
6
Decrementing
The decrement operator (--) decrements numbers.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The -- Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
x--;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The — Operator
4
Exponentiation
The exponentiation operator (**) raises the first operand to the power of the second operand.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The ** Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The ** Operator
25
x ** y produces the same result as Math.pow(x,y):
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>Math.pow()</h3>
<p id="demo"></p>
<script>
let x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>
</body>
</html>
Result:
JavaScript Arithmetic
Math.pow()
25
Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic expression.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<p>Multiplication has precedence over addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 + 50 * 3;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
Multiplication has precedence over addition.
250
Is the result of example above the same as 150 * 3, or is it the same as 100 + 150?
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
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<p>Multiplication has precedence over addition.</p>
<p>But parenthesis has precedence over multiplication.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (100 + 50) * 3;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
Multiplication has precedence over addition.
But parenthesis has precedence over multiplication.
450
When using parentheses, the operations inside the parentheses are computed first.
When many operations have the same precedence (like addition and subtraction), they are computed from left to right:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<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 = 100 + 50 - 3;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
When many operations has the same precedence, they are computed from left to right.
147
JavaScript Operator Precedence Values
Pale red entries indicates ECMAScript 2015 (ES6) or higher.
| Value | Operator | Description | Example |
|---|---|---|---|
| 21 | ( ) | Expression grouping | (3 + 4) |
| 20 | . | Member | person.name |
| 20 | [] | Member | person[“name”] |
| 20 | () | Function call | myFunction() |
| 20 | new | Create | new Date() |
| 18 | ++ | Postfix Increment | i++ |
| 18 | — | Postfix Decrement | i– |
| 17 | ++ | Prefix Increment | ++i |
| 17 | — | Prefix Decrement | –i |
| 17 | ! | Logical not | !(x==y) |
| 17 | typeof | Type | typeof x |
| 16 | ** | Exponentiation (ES2016) | 10 ** 2 |
| 15 | * | Multiplication | 10 * 5 |
| 15 | / | Division | 10 / 5 |
| 15 | % | Division Remainder | 10 % 5 |
| 14 | + | Addition | 10 + 5 |
| 14 | – | Subtraction | 10 – 5 |
| 13 | << | Shift left | x << 2 |
| 13 | >> | Shift right | x >> 2 |
| 13 | >>> | Shift right (unsigned) | x >>> 2 |
| 12 | < | Less than | x < y |
| 12 | <= | Less than or equal | x <= y |
| 12 | > | Greater than | x > y |
| 12 | >= | Greater than or equal | x >= y |
| 12 | in | Property in Object | “PI” in Math |
| 12 | instanceof | Instance of Object | instanceof Array |
| 11 | == | Equal | x == y |
| 11 | === | Strict equal | x === y |
| 11 | != | Unequal | x != y |
| 11 | !== | Strict unequal | x !== y |
| 10 | & | Bitwise AND | x & y |
| 9 | ^ | Bitwise XOR | x ^ y |
| 8 | | | Bitwise OR | x | y |
| 7 | && | Logical AND | x && y |
| 6 | || | Logical OR | x || y |
| 5 | ?? | Nullish Coalescing | x ?? y |
| 4 | ? : | Condition | ? “Yes” : “No” |
| 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 |
| 2 | yield | Pause Function | yield x |
| 1 | , | Comma | 5 , 6 |