JavaScript Arithmetic

By | August 16, 2022

JavaScript Arithmetic Operators

Arithmetic operators perform arithmetic on numbers (literals or variables).

OperatorDescription
+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.

OperandOperatorOperand
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.

ValueOperatorDescriptionExample
21( )Expression grouping(3 + 4)
20.Memberperson.name
20[]Memberperson[“name”]
20()Function callmyFunction()
20newCreatenew Date()
18++Postfix Incrementi++
18Postfix Decrementi–
17++Prefix Increment++i
17Prefix Decrement–i
17!Logical not!(x==y)
17typeofTypetypeof x
16**Exponentiation (ES2016)10 ** 2
15*Multiplication10 * 5
15/Division10 / 5
15%Division Remainder10 % 5
14+Addition10 + 5
14Subtraction10 – 5
13<<Shift leftx << 2
13>>Shift rightx >> 2
13>>>Shift right (unsigned)x >>> 2
12<Less thanx < y 
12<=Less than or equalx <= y
12>Greater thanx > y
12>=Greater than or equalx >= y
12inProperty in Object“PI” in Math
12instanceofInstance of Objectinstanceof Array
11==Equalx == y
11===Strict equalx === y
11!=Unequalx != y
11!==Strict unequalx !== y
10&Bitwise ANDx & y
9^Bitwise XORx ^ y
8|Bitwise ORx | y
7&&Logical ANDx && y
6||Logical ORx || y
5??Nullish Coalescingx ?? y
4? :Condition? “Yes” : “No”
3+=Assignmentx += y
3/=Assignmentx /= y
3-=Assignmentx -= y
3*=Assignmentx *= y
3%=Assignmentx %= y
3<<=Assignmentx <<= y
3>>=Assignmentx >>= y
3>>>=Assignmentx >>>= y
3&=Assignmentx &= y
3^=Assignmentx ^= y
3|=Assignmentx |= y
2yieldPause Functionyield x
1,Comma5 , 6

Leave a Reply

Your email address will not be published. Required fields are marked *