JavaScript Kit > JavaScript Reference > JavaScript Operators: Arithmetic
Arithmetic Operators
Arithmetic in JavaScript works very much like in any other programming language. However, be aware of the effects of typecasting in JavaScript, or the automatic conversion of operands to be of the same type as the others in an expression where not all operands share the same type (ie: adding a string with a number).
Also See: Arithmetic Operators precedence and associativity.
Arithmetic Operators
Operator | Description | Examples |
---|---|---|
+ (add) | Adds numeric operands or concatenates
strings. In the case of mixed numeric and string operands, the
numeric result will always be converted to a string value just
before being concatenated to the string operand, yielding a string
output. For example: var output=24+"5" //result is "245" |
1) x+y 2) |
- (subtract) | Subtracts numeric operands. If one of
the operands is a string, JavaScript will try to convert it to a
number first (ie: "5 " becomes 5 ), or if
unsuccessful, NaN is returned for the expression. |
x-7 |
* (multiply) | Multiplies numeric operands. If one of
the operands is a string, JavaScript will try to convert it to a
number first (ie: "5 " becomes 5 ), or if
unsuccessful, NaN is returned for the expression. |
5*2 |
/ (divide) | Divides numeric operands. If one of the
operands is a string, JavaScript will try to convert it to a number
first (ie: "5 " becomes 5 ), or if
unsuccessful, NaN is returned for the expression.Dividing by
0 yields the value |
y/x |
% (modulo) | Returns the remainder when the first
operand is divided by the second operand. If one of the operands is
a string, JavaScript will try to convert it to a number first (ie: "5 "
becomes 5 ), or if unsuccessful, NaN is
returned for the expression.The modulo operator is useful to determine whether a number is odd or even, for example: var scores=[3,34,12,53,23,82] Output: |
7%2 //returns 1 |
++ (increment) | Increments the operand by 1. Note the
following two possible behaviours: 1) Pre increment: If operator is used before
operand (ie: 2) Post increment: If operator is used following operand (ie:
|
Using x=2 for each example below:1)
2) 3) |
-- decrement | Decrements the operand by 1. Note the
following two possible behaviours: 1) Pre decrement: If operator is used before
operand (ie: 2) Post decrement: If operator is used following operand (ie:
|
x-- |
Unary minus (-) | Used in front of a lone operand to make it negative. If operand isn't a number, JavaScript will try to convert it first (NaN is returned if unsuccessful). The operand itself is not altered. | y=-x Result: y equals -x |
Unary plus (+) | Does nothing other than explicitly specifies an operand's implied positive sign. However, if operand isn't a number, JavaScript will try to convert it first (NaN is returned if unsuccessful). | y=+x Result: y equals x |
Arithmetic operators associativity and precedence
Left to Right Associativity
Arithmetic operators have an associativity of left to right, which means when chained, they are evaluated in the order from leftmost to rightmost. Consider this example:
a+b-c=5
Here b is first added to a then the result subtracted by c, in that order.
Precedence
Arithmetic operates have the high precedence relative to other operators in
JavaScript. This means that in an expression, it is evaluated first, before
operators like ==
or =
, for example. Multiplication
and divide (*, / %) have a higher precedence than plus and minus (+, -)unless
you override this default order using parenthesis.
a+b*c=20
The above expression is evaluated in the order of the multiplication
operators (*) first, then plus operator (+), and finally, the assignment
operator (=), due to their respective precedence order in JavaScript. However,
the expression (a+b)*c=20
with its parenthesis around the plus
operator alters the precedence so the addition is evaluated first.
Also See: Assignment Operators precedence and associativity.
Automatic string to number conversion
With all of the operators above except "addition", if one of the operands is non numeric, the operator will attempt to convert it to a number first. For example:
alert("5" * 2) //alerts 10 (numeric value)
Since "5" is a string, JavaScript will first try to convert that to its numeric equivalent (5) before proceeding. This behaviour is sometimes used to perform quick number conversions in operations that expect all numeric operands:
var numberofclasses="6" //variable may contain either 6 or
"6", coder doesn't know in advanced
var mygrade=80*numberorstring*1 //returns 480
My multiplying the variable numberofclasses
by 1, the result
will be a numeric value, regardless of whether the variable itself
contained a number or a string equivalent. You can also use
new Number(string)
to convert a numeric string to a number.
FORM field values are always strings
On a related note, it's important to realize that values contained inside
FORM fields, such as a text field (<input type="text">
) or
TEXTAREA, are always string in nature, even if the user enters what appears to
be a number. Knowing this fact can save yourself a lot of headache, especially
when attempting to perform numeric arithmetic on the values of multiple form fields.
<form>
<input type="text" id="value1" size="3" value="20" /> + <input type="text"
id="value2" size="3" value="100" /> <input type="button" value="submit"
onClick="cal()" />
</form>
<script type="text/javascript">
function cal(){
alert(document.getElementById("value1").value +
document.getElementById("value2").value)
}
</script>
To perform numeric calculations (instead of string concatenation) on form field values, always remember to
convert each one to a number first, either through forced conversion like the
technique mentioned above, or more formally, using functions like
parseInt()
.
- JavaScript Operators
- JavaScript Statements
- Global functions
- JavaScript Events
- Escape Sequences
- Reserved Words