JS Arithmetic

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