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.

**Read:** 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 operators, JavaScript 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 **int**, **float**, **double**, etc… 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; // MODULUS 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: