One of JavaScript’s most significant contributions to the evolution of the Internet is that it offloaded much of the server’s workload to the client, thereby significantly reducing both the number and duration of network calls. With a full-featured set of math operators and functions at its disposal, JavaScript could efficiently perform complex calculations within the browser. If you are fairly new to JavaScript, or math for that matter, this web development tutorial will introduce you to JavaScript’s many math operators, the types of numbers in JavaScript, and operator precedence rules.
Reading: Best Online Courses to Learn JavaScript
Arithmetic operators
There are many types of operators in JavaScript. Those which pertain to math are called Arithmetic operators. Compared with Java’s operatorsJavaScript has one extra: the Exponentiation **as of ECMAScript 2016. It, and the other arithmetic operators, are listed in the table below, along with their syntax, definitions, and examples:
| operator | syntax | Example | definition |
|---|---|---|---|
| addition | + | x + y | Sum of x and y |
| subtraction | – | x – y | Difference of x and y |
| multiplication | * | x * y | Product of x and y |
| division | / | x/y | Quotient of x and y |
| modulo | % | x%y | Remainder of x / y |
| exponentiation | ** | x**y | x to the y power |
| increment | ++ | x++/++x | x plus one |
| decrement | — | x–/–x | x minus one |
Numbers in JavaScript
Now that we have gone over the arithmetic operators, we will need some numbers on which to apply them. Some programming languages support many different data types to accommodate a variety of numbers, such as internal, float, doubleetc… JavaScript only has one data type for numbers, the aptly named Number. It makes it a lot easier to perform calculations because whatever type of numbers you are working with, you can handle them in exactly the same way. OK, truth be told, JavaScript has a second number type, BigInt, that is used for extremely large integers. That being said, for the purposes of this tutorial, we will just focus on Number values.
We can easily prove that different kinds of numbers are all treated as the same datatype by JavaScript using the typeof operator. Here are the results for an integer and float:
const myInt = 15; const myFloat = 6,667; console.log(typeof myInt); //number console.log(typeof myFloat); // number
What are operand, unary, and binary in JavaScript?
Before we get to some examples of working with Arithmetic operators in JavaScript, let’s quickly go over some practical terminology, specifically: “operand”, “unary”, and “binary”.
An operand is what operators are applied to. For instance, in the addition of 99 + 1 there are two operands: the left operand is 99 and the right operand is 1.
There are two types of operators, as follows:
- An operator is unary if it has a single operand. For example, the unary incrementor (++) adds 1 to a number.
- An operator is binary if it has two operands. In the 99 + 1 example above, the + is a binary operator because it goes between two values.
How to Use Unary and Binary Operators in JavaScript
At last, it is time to see the JavaScript math operators in action. Each operator is introduced with a comment and presented in the same order as above:
// ADDITION let sum = 10 + 40; console.log(sum); // 50 // We can also use the addition operator with two variables. For example: let price = 9.99, shipping = 2.99; let total = price + shipping; console.log(total); // 12.98 // SUBTRACTION let result = 20 – 5; console.log(result); // 15 // MULTIPLICATION let result = 2 * 9; console.log(result); // 18 // If either value is not a number, the JavaScript engine implicitly converts it into a number before performing the calculation. For example: let result=”5″ * 3; console.log(result); // 15 // DIVISION let result = 25 / 5; console.log(result); // 5 // Again, if either value is not a number, the JavaScript engine converts it into a number first. For example: let result = 20 / ‘4’; console.log(result); // 5; // MODULE let a = 10; let b = 3; let c = a % b; console.log(c); // 1; /* The INCREMENTOR and DECREMENTOR operators can be placed before (prefix) or after (postfix) their operands, so that they are evaluated either before or after the increment/decrement operation, respectively. */ // INCREMENTOR let a = 5; let b = ++a; // a is incremented before assignment console.log(a, b); // 6, 6 let a = 5; let b = a++; // a is incremented after assignment console.log(a, b); // 6, 5 // DECREMENTOR let a = 5; let b = –a; // a is decremented before assignment console.log(a, b); // 4, 4 let a = 5; let b = a–; // a is decremented after assignment console.log(a, b); // 4, 5 // EXPONENTIATION // a ** b produces the same result as Math.pow(a,b): let a = 5; let b = a ** 2; console.log(b); // 25
There’s a demo of the above script in codepen.
Operator Precedence in JavaScript
Operator precedence describes the order in which operations are performed in an arithmetic expression. Just as you learned in grade school math, multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (–), meaning those calculations get performed first. Hence, 10 + 4 / 2 would be equal to 12 and not 7. To override the default precedence, we can enclose the operations that we want performed first within parentheses, as in (10 + 4) / 2. Operations inside the parentheses are computed first, going from the innermost on outwards. Meanwhile, multiple operations with the same precedence (like addition and subtraction) are computed from left to right. Got all that? Now, here is a test:
(3 * (10 / (6 – 4))) + 2 = ?
The answer is 17. The steps taken by the JavaScript engine are:
(3 * (10 / 2)) + 2 (3 * 5) + 2 15 + 2 17
Final Thoughts on JavaScript Math Operators
This web development tutorial introduced JavaScript’s many math operators, the types of numbers in JavaScript, and operator precedence rules. Although the rules are fairly straight-forward, if you are ever unsure of how to write an expression you can always evaluate it in the browser console:
