JavaScript Arithmetic Operators: Understanding Arithmetic Operations in JavaScript

Table of Contents

JavaScript Arithmetic Operators

Learn about the arithmetic operators in JavaScript and how to perform mathematical operations using addition, subtraction, multiplication, division, remainder, and exponentiation. Understand operator precedence and apply arithmetic operations in JavaScript code.

JavaScript provides several arithmetic operators that allow you to perform mathematical operations on numeric values.

Here are the arithmetic operators in JavaScript:

JavaScript Addition operator (+):

The addition operator is used to add two or more numbers together or to concatenate strings.

Example:

let a = 5;
let b = 3;
let sum = a + b; // sum is 8
let str1 = "Hello";
let str2 = " world!";
let result = str1 + str2; // result is "Hello world!"

JavaScript Addition Operator (+):complete code in html

Here’s an example of how you can use the addition operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Addition Operator</title>
  <script>
    function performAddition() {
      let a = parseInt(document.getElementById("num1").value);
      let b = parseInt(document.getElementById("num2").value);
      let sum = a + b;
      document.getElementById("result").textContent = "Sum: " + sum;
    }
  </script>
</head>
<body>
  <h1>Addition Operator</h1>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1">
  <label for="num2">Number 2:</label>
  <input type="number" id="num2">
  <button onclick="performAddition()">Add</button>
  <p id="result"></p>
</body>
</html>

Explanation:

1-In this HTML code, we have an input field for two numbers (num1 and num2). 2-When the clicks the “Add” button, the performAddition() function is triggered. 3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), performs the addition operation, and displays the result in the element with the id “result”.

JavaScript Subtraction Operator (-):

The subtraction operator is used to subtract one number from another.

Example:

let a = 5;
let b = 3;
let difference = a - b; // difference is 2

JavaScript Subtraction Operator (-): complete code in html

Here’s an example of how you can use the subtraction operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Subtraction Operator</title>
  <script>
    function performSubtraction() {
      let a = parseInt(document.getElementById("num1").value);
      let b = parseInt(document.getElementById("num2").value);
      let difference = a - b;
      document.getElementById("result").textContent = "Difference: " + difference;
    }
  </script>
</head>
<body>
  <h1>Subtraction Operator</h1>
    <label for="num1">Number 1:</label>
  <input type="number" id="num1">
  <label for="num2">Number 2:</label>
  <input type="number" id="num2">
  <button onclick="performSubtraction()">Subtract</button>
  <p id="result"></p>
</body>
</html>

Explanation:

1-In this HTML code, we have two input fields for numbers (num1 and num2).

2-When the clicks the “Subtract” button, the performSubtraction() function is triggered.

3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), performs the subtraction operation, and displays the result in the element with the id “result”.

JavaScript Multiplication Operator (*):

The multiplication operator is used to multiply two or more numbers.

Example:

let a = 5;
let b = 3;
let product = a * b; // product is 15

JavaScript Multiplication Operator (*):complete code in html

Here’s an example of how you can use the multiplication operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Multiplication Operator</title>
  <script>
    function performMultiplication() {
      let a = parseInt(document.getElementById("num1").value);
      let b = parseInt(document.getElementById("num2").value);
      let product = a * b;
            document.getElementById("result").textContent = "Product: " + product;
    }
  </script>
</head>
<body>
  <h1>Multiplication Operator</h1>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1">
  <label for="num2">Number 2:</label>
  <input type="number" id="num2">
    <button onclick="performMultiplication()">Multiply</button>
  <p id="result"></p>
</body>
</html>

Explanation:

1-In this HTML code, we have two input fields for numbers (num1 and num2). 2-When the clicks the “Multiply” button, the performMultiplication() function is triggered.

3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), performs the multiplication operation, and displays the result in the element with the id “result”.

JavaScript Division Operator (/):

The division operator is used to divide one number by another.

Example:

let a = 10;
let b = 2;
let quotient = a / b; // quotient is 5

JavaScript Division Operator (/): complete code in html

Here’s an example of how you can use the division operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Division Operator</title>
  <script>
    function performDivision() {
      let a = parseInt(document.getElementById("num1").value);
      let b = parseInt(document.getElementById("num2").value);
      let quotient = a / b;
      document.getElementById("result").textContent = "Quotient: " + quotient;
    }
  </script>
</head>
<body>
  <h1>Division Operator</h1>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1">
  <label for="num2">Number 2:</label>
  <input type="number" id="num2">
  <button onclick="performDivision()">Divide</button>
  <p id="result"></p>
</body>
</html>

Explanation:

1-In this HTML code, we have two input fields for numbers (num1 and num2).

2-When the clicks the “Divide” button, the performDivision() function is triggered.

3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), performs the division operation, and displays the result in the element with the id “result”.

JavaScript Remainder/Modulus Operator (%):

The remainder operator returns the remainder when one number is divided by another.

Example:

let a = 10;
let b = 3;
let remainder = a % b; // remainder is 1

JavaScript Remainder/Modulus Operator (%):complete code in html

Here’s an example of how you can use the remainder/modulus operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Remainder/Modulus Operator</title>
  <script>
    function performRemainder() {
      let a = parseInt(document.getElementById("num1").value);
      let b = parseInt(document.getElementById("num2").value);
      let remainder = a % b;
      document.getElementById("result").textContent = "Remainder: " + remainder;
    }
  </script>
</head>
<body>
  <h1>Remainder/Modulus Operator</h1>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1">
  <label for="num2">Number 2:</label>
  <input type="number" id="num2">
  <button onclick="performRemainder()">Calculate Remainder</button>
  <p id="result"></p>
</body>
</html>

Explanation:

1-In this HTML code, we have two input fields for numbers (num1 and num2).

2-When the clicks the “Calculate Remainder” button, the performRemainder() function is triggered.

3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), performs the remainder operation using the modulus operator (%), and displays the result in the element with the id “result”.

JavaScript Exponentiation Operator (**):

The exponentiation operator raises the first operand to the power of the second operand.

Example:

let a = 2;
let b = 3;
let result = a ** b; // result is 8

These are the basic arithmetic operators in JavaScript. They allow you to perform various mathematical calculations within your JavaScript code.

JavaScript Exponentiation ():complete code in html**

Here’s an example of how you can use the exponentiation operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Exponentiation Operator</title>
  <script>
    function performExponentiation() {
      let base = parseInt(document.getElementById("base").value);
      let exponent = parseInt(document.getElementById("exponent").value);
      let result = base ** exponent;
      document.getElementById("result").textContent = "Result: " + result;
    }
  </script>
</head>
<body>
  <h1>Exponentiation Operator</h1>
  <label for="base">Base:</label>
  <input type="number" id="base">
  <label for="exponent">Exponent:</label>
  <input type="number" id="exponent">
  <button onclick="performExponentiation()">Calculate</button>
  <p id="result"></p>
</body>
</html>

Explanation:

1-In this HTML code, we have two input fields: base and exponent.

2-When the clicks the “Calculate” button, the performExponentiation() function is triggered.

3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), performs the exponentiation operation using the exponentiation operator (**), and displays the result in the element with the id “result”.

JavaScript Increment:complete code in html

In JavaScript, the increment operator (++) is used to increase the value of a variable by 1.

Here’s an example of how you can use the increment operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Increment Operator</title>
  <script>
    let count = 0;
    function incrementCount() {
      count++;
      document.getElementById("result").textContent = "Count: " + count;
    }
  </script>
</head>
<body>
  <h1>Increment Operator</h1>
  <button onclick="incrementCount()">Increment</button>
  <p id="result">Count: 0</p>
</body>
</html>

Explanation:

1-In this HTML code, we have a button labeled “Increment”.

2-When the clicks the button, the incrementCount() function is triggered.

3-This function increments the value of the count variable by 1 using the increment operator (count++), and then updates the content of the element with the id “result” to display the updated value of count.

4-By default, the initial value of count is set to 0, and it gets incremented by 1 each time the “Increment” button is clicked. The current value of count is displayed in the element.

The decrement operator: complete code in html

In JavaScript, the decrement operator (–) is used to decrease the value of a variable by 1. Here’s an example of how you can use the decrement operator in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Decrement Operator</title>
  <script>
    let count = 0;
    function decrementCount() {
      count--;
      document.getElementById("result").textContent = "Count: " + count;
    }
  </script>
</head>
<body>
  <h1>Decrement Operator</h1>
  <button onclick="decrementCount()">Decrement</button>
  <p id="result">Count: 0</p>
</body>
</html>

Explanation:

1-In this HTML code, we have a button labeled “Decrement”.

2-When the clicks the button, the decrementCount() function is triggered.

3-This function decreases the value of the count variable by 1 using the decrement operator (count–), and then updates the content of the element with the id “result” to display the updated value of count.

By default, the initial value of count is set to 0, and it gets decremented by 1 each time the “Decrement” button is clicked. The current value of count is displayed in the element.

Operator Precedence:complete code in html

In JavaScript, operator precedence determines the order in which operators are evaluated in an expression.

Here’s an example of how you can demonstrate operator precedence in JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Operator Precedence</title>
  <script>
    function evaluateExpression() {
      let result = 10 + 2 * 5; // Operator Precedence: Multiplication (*) has higher precedence than Addition (+)
      document.getElementById("result").textContent = "Result: " + result;
    }
  </script>
</head>
<body>
  <h1>Operator Precedence</h1>
  <button onclick="evaluateExpression()">Evaluate Expression</button>
  <p id="result">Result: </p>
</body>
</html>

Explanation:

1-In this HTML code, we have a button labeled “Evaluate Expression”.

2-When the clicks the button, the evaluateExpression() function is triggered.

3-This function demonstrates operator precedence by evaluating the expression 10 + 2 * 5.

4-According to operator precedence rules, multiplication (*) has a higher precedence than addition (+).

5-So, in the expression 10 + 2 * 5, the multiplication operation (2 * 5) is evaluated first, resulting in 10 + 10, which gives us the final result of 20.

6-The result is then displayed in the element with the id “result” as “Result: 20”.

Application

Here’s an example of an application that utilizes the concepts of arithmetic operators, operator precedence, and JavaScript within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Arithmetic Operations</title>
  <script>
    function calculate() {
      let num1 = parseInt(document.getElementById("num1").value);
      let num2 = parseInt(document.getElementById("num2").value);
      let result1 = (num1 + num2) * (num1 - num2) / num2;
      let result2 = num1 ** 2 + num2 ** 2;
      document.getElementById("result1").textContent = "Result 1: " + result1;
      document.getElementById("result2").textContent = "Result 2: " + result2;
    }
  </script>
</head>
<body>
  <h1>Arithmetic Operations</h1>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1">
  <label for="num2">Number 2:</label>
  <input type="number" id="num2">
  <button onclick="calculate()">Calculate</button>
  <p id="result1">Result 1: </p>
  <p id="result2">Result 2: </p>
</body>
</html>

Explanation:

1-In this HTML code, we have two input fields for numbers (num1 and num2).

2-When the clicks the “Calculate” button, the calculate() function is triggered.

3-This function retrieves the values entered in the input fields, converts them to integers using parseInt(), and performs two arithmetic operations:

4-The expression (num1 + num2) * (num1 – num2) / num2 calculates result1.

5-It adds num1 and num2, then subtracts num2 from num1, multiplies the two results together, and finally divides the result by num2.

6-The expression num1 ** 2 + num2 ** 2 calculates result2.

7-It squares num1 using the exponentiation operator (**), squares num2 using the same operator, and adds the two squared values together.

8-The results result1 and result2 are displayed in separate elements with the ids “result1” and “result2”.

Try to input different numbers and observe the results of the calculations based on the arithmetic operations and operator precedence.

Quiz with answers

Here’s a multiple-choice quiz with answers based on the lesson about JavaScript arithmetic operators:

1-What is the purpose of the addition operator in JavaScript?

a) Multiply two numbers

b) Divide two numbers

c) Add two numbers together

d) Subtract two numbers

Answer: c) Add two numbers together

2-Which operator has the highest precedence in JavaScript?

a) Addition (+)

b) Multiplication (*)

c) Subtraction (-)

d) Exponentiation (**)

Answer: d) Exponentiation (**)

3-What is the result of the expression 8 + 3 * 2?

a) 14

b) 19

c) 11

d) 8

Answer: b) 19

4-What operator is used to perform division in JavaScript?

a) /

b) *

c) %

d) +

Answer: a) /

5-What is the value of 10 % 3?

a) 1

b) 3

c) 0

d) 10

Answer: a) 1

6-Which operator is used for exponentiation in JavaScript?

a) ^

b) %

c) **

d) //

Answer: c) **

7-The result of 5 * 2 + 10 / 5 is:

a) 4

b) 7

c) 14

d) 12

Answer: b) 7

8-What is the value of 7 – 4 * 2?

a) 14

b) 1

c) 3

d) 9

Answer: c) 3

9-What operator is used for incrementing a variable by 1?

a) ++

b) —

c) +=

d) *=

Answer: a) ++

10-Which of the following is an example of using the decrement operator?

a) x = x + 1;

b) x = x – 1;

c) x = x * 2;

d) x = x / 2;

Answer: b) x = x – 1;

11-What is the result of the expression (6 + 3) * 2 – 5?

a) 12

b) 16

c) 19

d) 23

Answer: b) 16

12-Which operator is used for concatenating strings in JavaScript?

a) +

b) –

c) *

d) /

Answer: a) +

13-What is the value of 12 / 0 in JavaScript?

a) 0

b) 12

c) Infinity

d) NaN (Not a Number)

Answer: c) Infinity

14-The result of 2 ** 3 ** 2 is:

a) 64

b) 512

c) 81

d) 256

Answer: d) 256

15-What is the value of 10 % 2?

a) 0

b) 2

c) 5

d) 1

Answer: a) 0

16-Which operator is used for performing integer division in JavaScript?

a) //

b) %

c) **

d) /

Answer: a) //

17-The expression 4 + 3 * 2 – 6 / 3 evaluates to:

a) 4

b) 6

c) 5

d) 8

Answer: c) 5

18-What is the value of 2 + 2 * 2 ** 2 – 1?

a) 9

b) 10

c) 12

d) 15

Answer: b) 10

19-What operator is used for subtracting one number from another in JavaScript?

a) +

b) *

c) /

d) –

Answer: d) –

20-Which operator is used for calculating the remainder in JavaScript?

a) %

b) /

c) *

d) +

Answer: a) %

21-What is the result of the expression 5 + 10 / 2 – 3 * 2?

a) 10

b) 12

c) 14

d) 16

Answer: c) 14

22-Which operator is used for exponentiation in JavaScript prior to ES6?

a) ^

b) **

c) ^^

d) //

Answer: a) ^

23-What is the value of Infinity – Infinity in JavaScript?

a) 0

b) Infinity

c) -Infinity

d) NaN (Not a Number)

Answer: d) NaN (Not a Number)

24-The result of 9 % 4 is:

a) 2

b) 3

c) 4

d) 1

Answer: b) 3

25-Which operator is used for floor division in JavaScript?

a) //

b) %

c) **

d) /

Answer: a) //

26-The expression 8 * 2 ** 3 – 4 evaluates to:

a) 56

b) 68

c) 72

d) 64

Answer: c) 72

27-What is the value of 1 / 0 in JavaScript?

a) 1

b) 0

c) Infinity

d) NaN (Not a Number)

Answer: c) Infinity

28-The expression (3 + 4) * 2 / (5 – 1) evaluates to:

a) 1

b) 2

c) 3

d) 4

Answer: b) 2

29-What operator is used for calculating the square root in JavaScript?

a) **

b) //

c) Math.sqrt()

d) /

Answer: c) Math.sqrt()

30-The result of 2 + 2 * 2 + 2 is:

a) 8

b) 10

c) 12

d) 6

Answer: a) 8

JavaScript Tutorial

Curriculum

JavaScript Arithmetic Operators: Understanding Arithmetic Operations in JavaScript

JavaScript Arithmetic Operators

JavaScript Addition operator (+):

JavaScript Addition Operator (+):complete code in html

Explanation:

JavaScript Subtraction Operator (-):

JavaScript Subtraction Operator (-): complete code in html

Explanation:

JavaScript Multiplication Operator (*):

JavaScript Multiplication Operator (*):complete code in html

Explanation:

JavaScript Division Operator (/):

JavaScript Division Operator (/): complete code in html

Explanation:

JavaScript Remainder/Modulus Operator (%):

JavaScript Remainder/Modulus Operator (%):complete code in html

JavaScript Exponentiation Operator (**):

JavaScript Exponentiation (**):complete code in html

Explanation:

JavaScript Increment:complete code in html

The decrement operator: complete code in html

Operator Precedence:complete code in html

Application

Explanation:

Quiz with answers

Leave a Reply

Modal title

JavaScript Exponentiation ():complete code in html**