The Power of JavaScript: Operators - Arithmetic Operators
(Page 2 of 4 )
Operator | Operation Explanation |
| + | The addition operator is used to add two numeric values when both of the operands are numeric values. If one of the values is a string value, it will perform concatenation (after converting the first numerical value to a string value). If one of the operands is a Boolean value and the other is a numeric value, it will perform an addition operation, because the Boolean value true equals 1 and false equal 0. A statement like var x = 2 + true produces 3 and stores it in x. The statement var x = 2 + false produces 2. The addition operator has been defined in the Javascript programming language to work with strings and numeric values. The addition operator is a binary operator because it works on two operands. |
| - | The subtraction operator is used to subtract values. It works only with numeric values, so if you use string operands the interpreter will try to convert them to numerical values (we will talk about Data Type Conversion after some time when you become more familiar with Javascript). Thus, the expression "6" - 1 pr "6" - "1" produces the value 5. But when you use an expression like "6" - "I'm text" the interpreter produces a special numerical value called NaN which means Not a Number. This makes sense because 6 - "I'm text" will not produce a numerical value, so the interpreter has a special value (NaN) for these situations. Like the addition operator, the subtraction operator is a binary operator, and it's defined in the Javascript language to work with numerical values only. |
| * | The multiplication operator is used to multiply values. It has been defined in the language to work with numerical values only. If you supply it with string operands, it will try to convert them to numerical values. The expression "3" * "2" produces the numerical value 6. When one of the operands can't be converted to a numerical value the interpreter produces the value NaN. The multiplication operator is a binary operator because it works on two operands. |
| / | The division operator is used to divide values. It has been defined in the language to work with numerical values only. If you supply it with string operands it will try to convert them to numerical values. The expression "6" / "2" produces the numerical value 3. When one of the operands can't be converted to a numerical value, the interpreter produces the value NaN. Dividing zero by zero (0/0) also produces the value NaN. The division operator is a binary operator because it works on two operands. |
| % | The modulo operator is used to calculate the remainder of the division of the first operand by the second. For example, 11 % 2 equals 1 because 10 / 2 = 5 and the remainder is 1, which is the first operand modulo the second. It has been defined in the language to work with numerical values. If you supply it with string operands it will try to convert them to numerical values. When one of the operands can't be converted to a numerical value. the interpreter produces the value NaN. |
| Unary - | The unary minus operator (-) is used to define a negative value like -2 or -1234 and so on. It's defined in the language as a unary operator, which means that it works only on one operand to change it from a positive value to a negative value. If you use it with a string operand it will try to convert the operand to a numerical value. The expression -"2" produces the numerical value -2. When the operand can't be converted to a numerical value, the interpreter produces the value NaN. |
| Unary + | The unary plus Operator (+) is used to define a positive value like +2 or +14 and so on. It's defined in the language as a unary operator, which means that it works only on one operand. If you use it with a string operand it will try to convert the operand to a numerical value, so the expression +"2" produces the numerical value 2. When the operand can't be converted to a numerical value, the interpreter produces the value NaN. |
Arithmetic Operators Example
Here's a complete example covering the arithmetic operators that we have discussed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var x = 12;
var y = 5;
// declaring a variable without the var keyword
result = x + y;
document.write(result + "<br>");
result = x - y;
document.write(result + "<br>");
result = x * y;
document.write(result + "<br>");
result = x / y;
document.write(result + "<br>");
result = x % y;
document.write(result + "<br>");
document.write("----------------" + "<br>");
result = x + 6 + "12";
document.write(result + "<br>");
result = "10" - "3";
document.write(result + "<br>");
result = y * "text";
document.write(result + "<br>");
</script>
</head>
<body>
</body>
</html>
Save the file, then load it with your browser, and you will get the following values written to the Web page:
Let's walk through the code statement by statement. The first statement declares the variable x and assigns the value 12 to it. The second statement declares the variable y and assign the value 5 to it. Next to the comment there's the statement result = x + y; this statement assigns the product value of x + y to result, but you would say that we have not declared a variable called result in the script.
Actually, Javascript permits this technique in which you can directly assign a value to a variable without declaring it using the keyword var, but you can't write a statement like result (without assigning a value). What I mean is that you must assign a value to the variable; you need it to be declared, so the Javascript interpreter understands that there's a value for a variable that has not been declared yet, so it declares it for you automatically. This technique is considered a bad practice and you should avoid doing so, but I wanted to show you that it exists, and that Javascript interpreters allow it.
The expression x + y produces the value of x added to the value of y. This value is assigned to the result variable using the assignment operator (which we will discuss shortly), and the same holds true for x - y and x * y, so there's nothing interesting about it. We have discussed the statement document.write() before as a way to write something to the browser, and we simply concatenate the variable result's value with the string value "<br>" as we did before.
The expression x / y produces the value 2.4. If Javascript Number data type stores only integers (integers are those whole numbers without a fraction), then the result would be 2 not 2.4, but because Javascript manipulates all the numeric values as floating points, 12 / 5 equals 2.4 . The next statement x % y produces the value 2 because 12 / 5 equals 2 with a remainder of 2, which is the modulo.
The statement document.write("----------------" + "<br>"); just makes a separation between the sections. The following statement (result = x + 6 + "12";) is very interesting. You would think that the produced value of this expression is the string value "12612" because we have said that if one of the operands is a string value then the interpreter will convert the other operand to a string and concatenate. Yes, this is true, but our expression is different because the addition operator works from left to right (we will talk about that in the section Operators Precedence and Associativity, which will appear in the second article following this one in this series).
Just for now say that the addition operator works by adding the value of the left side to the value of the right side, so in our expression we have x which contains the numerical value 12, and the value 6, so x + 6 equals 18 because both values are numerical values, but the second addition operator works on 18 + "12" so it must convert the numerical value 18 to a string value ("18") then concatenate it with the string value of the right side "12". That's why the final value of the expression is "1812".
The statement result = "10" - "3"; produces the numerical value 7 because the subtraction operator is not defined to work with strings, so the interpreter tries to convert both of the operands from string to numerical values; that's why we got the value 7. The last statement (result = y * "text";) produces the numerical special value NaN (Not a Number, as we said before) because the interpreter tried to convert the string value "text" to a numerical representation, but it failed, so the value of this expression can't be defined, which means that it's not a number (NaN).
Next: Comparison Operators >>
More JavaScript Articles
More By Michael Youssef
/ 13 
