Select Page

# JavaScript Math Operators | Developer.com

Robert Gravelle
Published: November 19, 2022

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.

## 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:

OperatorSyntaxExampleDefinition
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:

1. An operator is unary if it has a single operand. For example, the unary Incrementor (++) adds 1 to a number.
2. 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: Source: www.developer.com