Math Operators in JavaScript

Mathematical operations are among the most fundamental features of any programming language.

JavaScript contains the following mathematical operators:

1. Addition and Subtraction

Addition and subtraction operators are used to find the sum and difference of numerical values. JavaScript has a built-in calculator, so mathematical operations can be done directly.

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z); //30

One interesting thing to note and be aware of in JavaScript is the result of adding a number and a string. We know that 1 + 1 should equal 2, but this equation will have unexpected results.

let x = 1 + "1";

console.log(x); //"11"

Instead of adding the two numbers, JavaScript will convert the entire statement into a string and concatenate them together. It’s important to be careful with JavaScript’s dynamically-typed nature, as it can have undesired outcomes.

2. Multiplication and Division

Multiplication and division operators are used to find the product and quotient of numerical values.

An asterisk (*) is used to represent the multiplication operator.

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z); //100

A slash (/) is used to represent the division operator.

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z); //4

3. Modulo

One arithmetic operator that you are slightly less familiar with is the modulo operator, which calculates the remainder of a quotient after division. Modulo is represented by a percentage sign (%).

console.log(9 % 3); // 0

4. Exponentiation

Exponentiation is one of the newer operators in JavaScript, and it allows us to calculate the power of a number by its exponent. The syntax for exponentiation is two asterisks in a row (**).

10 to the third power, or 10^3, is written like this:

console.log(10 ** 3); // 1000

5. Increment and Decrement

Increment and decrement operators increase or reduce the numerical value of a variable by one. They are represented by two plus signs (++) or two minus signs (--). They are often used with loops.

Note that increment and decrement operators can only be used on variables; attempting to use them on a raw number will result in an error.

Increment and decrement operators can be classified as a prefix or postfix operation, depending on whether or not the operator is placed before or after the variable.

Prefix Operation

In a prefix operation, the operator (either ++ for increment or -- for decrement) comes before the variable.

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix); //8
console.log(x); //8

The value of x is increased by one before being assigned to the prefix variable. So, after the operation, x becomes 8, and prefix also becomes 8.

Postfix Operation

In a postfix operation, the operator comes after the variable.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix); //7
console.log(y); //8

Here, the value of y is assigned to the postfix variable first, and then y is incremented by one. So, after the operation, postfix becomes 7 and y is incremented to 8.

Order of execution

Several arithmetic operations can be performed in one expression, but it is important to understand how the result will be calculated. Multiplication and division are performed before addition or subtraction.

This can affect the number that you expect to see. To illustrate this effect, look at the following examples.

Here the numbers are calculated left to right, so the total is 16:

let total = 2 + 4 + 10; //16

But in the following example the total is 42 (not 60):

let total = 2 + 4 * 10; //42

This is because multiplication and division happen before addition and subtraction.

To change the order in which operations are performed, place the calculation you want done first inside parentheses. So for the following, the total is 60:

let total = (2 + 4) * 10;

The parentheses indicate that the 2 is added to the 4, and then the resulting figure is multiplied by 10.

Reinforce what you’re learning

Once you've read the article, you understand how things work, but that's not the same as being able to use it by yourself.

My aim isn't just for you to comprehend what's taught in the article, but for you to feel confident using it on your own once you've grasped it.

To help you do that, I've put together exercises. These will assist you in practicing what you've learned and identifying any areas where you might have some gaps in your understanding.

Solve These Exercises