JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Arithmetic
JavaScript Arithmetic Operators
Arithmetic operators are used to perform the arithmetic on numbers (literals or variables)
Operator | Description |
+ | Addition |
– | Subtraction |
* | Multiplication |
** | Exponentiation (ES2016) |
/ | Division |
% | Modulus (Remainder) |
++ | Increment |
— | Decrement |
Arithmetic Operations
A typical arithmetic operation is used on two numbers.
The two numbers can be defined as 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>
Output
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>
Output
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>
Output
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 specified by an operator.
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
JavaScript Arithmetic
The % Operator
1
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>
Output
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>
Output
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>
Output
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>
<p>Math.pow()</p>
<p id=”demo”></p>
<script>
let x = 5;
document.getElementById(“demo”).innerHTML = Math.pow(x,2);
</script>
</body>
</html>
Output
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>
Output
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>
Output
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>
Output
JavaScript Arithmetic
When many operations has the same precedence, they are computed from left to right.
147