In arithmetic operations within JavaScript, you typically perform calculations on two numbers, which can either be literals (directly written values) or variables.

Example of Arithmetic Operation with Literals:

let x = 100 + 50; initializes the variable x with the result of adding two number literals, 100 and 50, resulting in 150.

<!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>

Example of Arithmetic Operation with Variables:

If a and b are previously defined variables, you can calculate their sum and assign it to another variable:

let a = 100;
let b = 50;
let x = a + b;  // `x` will hold the result of `a` + `b`, which is 150.

Example of Arithmetic Operation with Expressions:

If a is a previously defined variable, the expression (100 + 50) * a first adds the numbers 100 and 50, and then multiplies the result by the value of a. Here’s how you might define it:

let a = 3;
let x = (100 + 50) * a;  // First calculates 150, then multiplies by 3 to get 450.

Operators and Operands

In arithmetic operations, the values being manipulated are known as operands, and the symbol indicating the operation to be performed is called the operator.

Example:

In the expression 100 + 50, 100 and 50 are the operands, and + is the operator.

Adding

The addition operator (+) in JavaScript is used to sum numbers:

Example:

Initialize x with 5 and y with 2.
Add x and y to get z, so z equals 7 (x + y).

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Subtracting

The subtraction operator (-) in JavaScript is used to subtract one number from another:

Example:

Initialize x with 5 and y with 2.
Subtract y from x to calculate z, so z equals 3 (x - y).

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The - Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
let y = 2;
let z = x - y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Multiplying

The multiplication operator (*) in JavaScript is used to multiply numbers together:

Example:

Set x to 5 and y to 2.
Multiply x and y to get z, so z equals 10 (x * y).

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The * Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Dividing

The division operator (/) in JavaScript is used to divide one number by another:

Example:

Set x to 5 and y to 2.
Divide x by y to determine z, so z equals 2.5 (x / y).

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The / Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
let y = 2;
let z = x / y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Remainder

The modulus operator (%) in JavaScript is used to obtain the remainder of a division between two numbers:

Example:

Set x to 5 and y to 2.
Calculate the remainder when x is divided by y, so z equals 1 (x % y), as 5 divided by 2 equals 2 with a remainder of 1.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The % Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
let y = 2;
let z = x % y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

In arithmetic, particularly when dividing two integers, the outcome consists of a quotient (the result of the division) and a remainder (the part of the dividend that does not evenly divide by the divisor).

In mathematics, the modulo operation is used to find this remainder after division. The result of a modulo operation is specifically the remainder left over when one integer is divided by another. This operation is particularly useful in various computing scenarios where determining the cyclical repetition of operations is needed.

Incrementing

The increment operator (++) in JavaScript is used to increase the value of a number by one.

Example:

Start with x set to 5.
Use the increment operator x++ to increase the value of x by one.
After the increment, x becomes 6.
Assign the value of x to z, so z also equals 6.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The ++ Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
x++;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Decrementing

The decrement operator (--) in JavaScript is used to decrease the value of a number by one.

Example:

Begin with x set to 5.
Use the decrement operator x-- to reduce the value of x by one.
After the decrement, x becomes 4.
Assign the new value of x to z, so z also equals 4.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The -- Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
x--;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Exponentiation

The exponentiation operator (**) in JavaScript is used to raise a number to the power of another number.

Example:

Start with x set to 5.
Use the exponentiation operator to raise x to the power of 2, so z equals 25 (x ** 2). This calculation means x multiplied by itself, which in this case is 5×55×5.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The ** Operator</h2>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>

</body>
</html>

The exponentiation operator (**) and the Math.pow() function in JavaScript both serve the purpose of raising a number, x, to the power of another number, y.

Example:

Start with x set to 5.
Use the Math.pow() function to raise x to the power of 2, so z equals 25, which is the same result as x ** 2. Here, Math.pow(x, 2) computes 5 raised to the second power (5 squared), resulting in 25.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Math.pow()</h2>

<p id="demo"></p>

<script>
let x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>

</body>
</html>

Operator Precedence

Operator precedence in JavaScript dictates the order in which operators are evaluated when calculating an expression. It is essential for determining how different parts of an expression are grouped and in what sequence the operations occur.

Example:

In the expression let x = 100 + 50 * 3;, the multiplication operator (*) has a higher precedence than the addition operator (+).
Therefore, 50 * 3 is evaluated first, resulting in 150.
Then, 100 is added to 150, making the final value of x equal to 250.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</h2>
<p>Multiplication has precedence over addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 100 + 50 * 3;
</script>

</body>
</html>

In the example let x = 100 + 50 * 3;, multiplication is performed first due to its higher precedence over addition. So, the result is equivalent to 100 + 150, not 150 * 3.

Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-). This order can be altered by using parentheses, which force the operations within them to be executed first.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</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>

Example

let x = (100 + 50) * 3;

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</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>

When many operations have the same precedence (like addition and subtraction or multiplication and division), they are computed from left to right:

Examples

let x = 100 + 50 - 3;

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</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>

‍

let x = 100 / 50 * 3;

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</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>

‍

Take a look into your desired course

Students

Hire from us

Partners