How to do basic Maths with JavaScript Operators?

Front End Technology Javascript Web Development

In this guide, we will explain the different methods to do basic maths with JavaScript operators. While creating any website, application, or game, you might have to show the calculated results, whether the number shows the subscriber count or the points of the user. Hence, learning how to add, subtract, and multiply using different data types in JavaScript is important.

Using (+) Operator for Addition in JavaScript

The binary operator to do basic maths in JavaScript is straightforward. However, the process can become a bit complex when you have to get the number as the output. This method will teach us how to get the numbers and get the correct output.

Syntax

In the following syntax, you can see that the same number is used for addition. However, the output can be different because the number ‘2’ can be considered a string, and the result can be 22 instead of 4. In JavaScript, true is considered 1, and false is considered 0.

let a = 2 + '2';
let b = true + '2';

Example

The use of the correct method is important to get the output. If you add 33 + ‘60’, then you will get the output 3360.

Since true is number 1, adding true and 2 will give you output 3. Hence, you should know the correct method for basic maths in JavaScript.


<html>
<body>
   <p id=sum1></p>
   <p id=sum2></p>
   <p id=sum3></p>
</body>
<script>
   const a = 2 + 2;
   let b = 2 + '2';
   let c = true + '2';
   let xa = "2 + 2 = ";
   let xb = "2 + '2' = ";
   let xc = "true + '2' = ";
   document.getElementById('sum1').innerHTML = xa + a;
   document.getElementById('sum2').innerHTML = xb + b;
   document.getElementById('sum3').innerHTML = xc + c;
</script>
</html>

Using (–) Operator for Subtraction in JavaScript

Although the addition rules in JavaScript are quite difficult to understand, you can use common logic for other operations.

Syntax

Compared to the addition method, you are unlikely to get an incorrect answer even if subtracting 20 – ‘2’. Here in the syntax, you can see different methods used for subtraction in JavaScript.

let b = 2 - '20';
let c = false - '20';
let d = 20 - false;

Example

In this example, you can see the output are correct even when different methods are used. Thus, the calculation using the subtraction operator in JavaScript is not difficult.


<html>
<body>
   <p id=sub2></p>
   <p id=sub3></p>
   <p id=sub5></p>
</body>
<script>
   let b = 2 - '20';
   let c = false - '20';
   let d = 20 - false;
   let xb = "2 - '20' = ";
   let xc = "false - '20' = ";
   let xd = "20 - false = ";
   document.getElementById('sub2').innerHTML = xb + b;
   document.getElementById('sub3').innerHTML = xc + c;
   document.getElementById('sub5').innerHTML = xd + d;
</script>
</html>

Using (*) Operator for Multiply in JavaScript

Multiplication can be done in JavaScript using the same logic used in subtraction. True and false are considered 1 and 0, respectively. Hence, when you multiply with true or false, you will get the same number or 0.

Syntax

We use the same method to multiply in JavaScript as we used for other operations.

const a = 20 * 2;
let c = false * '20';
let d = 20 * true;

Example

In the following example, you can see used simple multiplication method for basic maths in JavaScript.


<html>
<body>
   <p id=multi1></p>
   <p id=multi3></p>
   <p id=multi5></p>
</body>
<script>
   const a = 20 * 2;
   let c = false * '20';
   let d = 20 * true;
   let xa = "20 * 2 = ";
   let xc = "false * '20' = ";
   let xd = "20 * true = ";
   document.getElementById('multi1').innerHTML = xa + a;
   document.getElementById('multi3').innerHTML = xc + c;
   document.getElementById('multi5').innerHTML = xd + d;
</script>
</html>

Using (/) Operator for Divide in JavaScript

When it comes to dividing in JavaScript, you can get results like Infinity or -Infinity. In the example, we will see how different methods can give certain outputs.

Syntax

Although the syntax looks quite easy to solve, you can get the output that might seem different. In JavaScript, when you divide anything with 0 or false, you will get Infinity or -Infinity as an answer.

const a = 5 / 0;
let c = -5/ false;
let d = 20 / true;

Example

Here is an example that you can use to try yourself and check the results. If you divide any number by true, then you will get the same number as a result.


<html>
<body>
   <p id=div1></p>
   <p id=div3></p>
   <p id=div5></p>
</body>
<script>
   const a = 5 / 0;
   let c = -5/ false;
   let d = 20 / true;
   let xa = "5 / 0 = ";
   let xc = "-5 / false = ";
   let xd = "20 / true = ";
   document.getElementById('div1').innerHTML = xa + a;
   document.getElementById('div3').innerHTML = xc + c;
   document.getElementById('div5').innerHTML = xd + d;
</script>
</html>

While using JavaScript to create websites or games, you will be required to know the method to do basic maths. Hence, you should try the above examples and understand the difference between the results.