17.6    Arithmetic Operators for Calculation Tasks in JavaScript

Like any other programming language, JavaScript has all the common arithmetic operators for numerical calculations on board. Table 17.3 provides an overview of the arithmetic operators in JavaScript.

Table 17.3     Overview of the Arithmetic Operators

The use of arithmetic operators is relatively simple, as the following example shows:

let val1 = 101 + 202;
console.log(val1);     // Output:  303
console.log(88 - 22);  // Output:  66
let val2 = val1 * 3;
console.log(val2);     // Output: 909
console.log(val2 / 4); // Output: 227.25
console.log(val2 % 4); // Output: 1 

As usual in mathematics, when multiple operators are used, the rule applies that multiplication and division tasks are done before addition and subtraction tasks. Thus, in an expression such as 15 – 2 * 5, 2 is first multiplied by 5, then the result of the expression 2 * 5 is subtracted from 15, resulting in 5. Thus, the highest priority arithmetic operators are *, /, and %. Only then do + and – follow and finally the assignment operator =. Except for the assignment operator, arithmetic operators of the same rank are evaluated from left to right.

Consider this example:

let val3 = 100 / 2 - 5 * 4;
console.log(val3); // Output: 30 

In this example, the subexpressions 100 / 2 (= 50) and 5 * 4 (= 20) are calculated first, and then the result of these subexpressions is subtracted (50 – 20), resulting in 30. If you don’t want to perform a calculation according the preceding rule, you can use parentheses. The use of parentheses has the highest priority and, if nested, gets evaluated from the inside out. Here’s an example:

let val4 = 5 + 6 * 2;     // = 17
let val5 = (5 + 6) * 2;   // = 22 

In the first example, 6 * 2 (= 12) is first calculated as usual and then 5 is added, which leads to the result 17. In the second example because of the higher priority of parentheses over operators, the expression between the parentheses, 5 + 6, is calculated first (= 11) and then multiplied by 2 (= 22). Often the use of parentheses is helpful because it makes the code more readable. For example, a calculation such as (100 / 2) - (5 * 4) reads better than 100 / 2 – 5 * 4.

Furthermore, in JavaScript, in addition to the ordinary assignment operator =, you can find arithmetic compound assignment operators such as +=, -=, *=, /=, and %=. Again, the meaning is the same as listed in Table 17.3. With the arithmetic assignment operators, instead of a calculation like valA=valA+valB;, you can just write valA+=valB; quickly and briefly. The same applies to the other versions. However, when using compound assignment operators, there must be a variable on the left. In terms of priority, these operators are on the same level as the assignment operator.