JavaScript Basics: Operations
JavaScript supports a host of basic arithmetic operations. The basic operations are addition using "+", subtraction using "-", multiplication using "*", division using "/", modulo using "%" etc.
The next class of operators for our discussion are called compound assignment operators: "+=", "-=", "*=", "/=", and "%=". These operators are used when we need to update the value of a variable. Thus, to increase var1 by 10, we could simply write "var1 += 10", instead of "var1 = var1 + 10". Similarly, to multiply var with 10, we could simply write "var1 *= 10", instead of "var1 = var1 * 10". Same rule applies to other operations.
Yet another class of JavaScript operators are increment/decrement operators: "++" (increment operator) and "--" (decrement operator). These handy unary operators, increment and decrement a number variable (integer or float) by 1 respectively. Thus, "var1++" is same as "var1 = var1 + 1" and "var1--" is same as "var1 = var1 - 1". Both "++" and "--" can be applied before or after a variable and accordingly, can have different meanings. It is important to understand this difference. When we apply the operator at the end of the variable (e.g. "var1++"), then the operation returns the variable first and increments it later. On the other hand, when we apply the operator at the start of the variable (e.g. "++var1"), then the operation increments the variable first and then returns the incremented value. Thus, "var2 = ++var1" and "var2 = var1++" mean two different assignments for var2.
Before proceeding further, let us use two simple example to demonstrate usage of various types of JavaScript operators.
The first example (provided below) demonstrates usage of basic arithmetic operations. This example computes sum and product of two variables.
<!doctype html>
<html>
<div id="idDiv"> </div>
<script type="text/javascript">
var var1 = 100;
var var2 = 1;
var sum = var1 + var2;
var product = var1 * var2;
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
elem.innerHTML += "Variables are: " + var1 + " and " + var2 + " <br>";
elem.innerHTML += "Sum is " + sum + ", Product is " + product + " <br>";
</script>
</html>
Now, let us run this program (store it in a file, say "basic.html", and load it using a browser). As expected, the output prints the value of these two variables along with their sum and the product.
Figure: Working with variables.
Note that the above program assigns values to various variables e.g "var1 = 100". An assignment operation takes the value on the right side (e.g. 100) and stores it in the variable (e.g. var1) on the left side. For such assignment operations, ordering is important. We must keep the variable (often referred to as lvalue) on the left and keep the values (literal or yet another variable holding a value) on the right. Assigning in the opposite manner ("100 = var1") would simply be an error!
The second examples shows the usage of compound and increment operators; for the sake of brevity, we show the output as comments after the respective operation.
<!doctype html> <html> <script type="text/javascript"> var var1, var2, var3; var1 = 10; var1 += 100; // var1 equals 110. var1 = 10; var1 *= 10; // var1 equals 100. var1 = 10; var2 = ++var1; // var2 equals 11 and var1 equals 11. var1 = 10; var3 = var1++; // var3 equals 10 and var1 equals 11. </script> </html>
As we can see, "++var1" increases the value of var1 first and then assigns it to var2; thus, var2 becomes 11. On the other hand, "var1++" assigns the value first to var3 and then increases the value of var1; thus, var3 becomes 10.
Operator Precedence
When there are several operations, it is possible that an expression containing more than two of these operations can appear ambiguous. As an example, for expression, "var1 = 10 * 2 + 7 ;", it is not clear if we first multiply 10 by 2 and then add 7 (so that var1 becomes 27) or first add 2 to 7 and then multiply with 10 (so that var1 becomes 90).
To handle such ambiguous cases, JavaScript maintains a precedence order for various operators. The following table list various operators from top to bottom, in descending precedence; thus, operators at the top have higher precedence that those that are below it. With this rule in place, if an expression has both "+" and "*", then JavaScript uses the precedence list to run "*" first and then run "+" next. This provided list contains some of the common JavaScript operators;the list is certainly not complete. Please note that some of the rows in the table have multiple operators; for such rows, the precedence can be considered same for all of them.
| Operator | Description |
|---|---|
| () | Parentheses |
| ++, -- | Increment and decrement |
| delete | delete operator |
| typeof | typeof operator |
| void | void operator |
| *, /, % | Multiplication, division, and modulo |
| +, - | Addition and subtraction |
| == | Equality |
| != | Inequality |
| === | Strict equality |
| & | Bitwise AND |
| ^ | Bitwise XOR |
| | | Bitwise OR |
| && | Logical AND |
| || | Logical OR |
| = | Assignment |
| +=, -=, *=, /=, .=, %= | Compound assignments |
Now that we know the operation precedence list, let us revisit our earlier expression of "var1 = 10 * 2 + 7;". As per the precedence list, "*" has a higher precedence over "+". So, JavaScript first multiples 10 and 2 (which becomes 20) and then adds 7 to the result. Thus, the value of var1 would be 27 and not 90.
In the above list, parentheses has a higher precedence than other operators and hence, where ever there is less clarity, we can simply use parentheses to avoid ambiguity. Using parentheses also improves readability of the code. Thus, in our earlier program, if we wish to do addition first, followed by multiplication, then we can clearly specify it as "var1 = 10 * (2 + 7);". Else, if we intend to multiply 10 and 2 first and then add 7 to the result, then we can clearly specify it as "var1 = (10 * 2) + 7;". It is a good programming practice to use parentheses richly and thereby, avoid ambiguities.