Categories:

JavaScript Kit > JavaScript Reference > JavaScript Operators: Arithmetic

Arithmetic Operators

Last updated: June 9th, 2008

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"
var output2=24+1+"5" //result is "255"
var output3=1+"5"+24 //result is "1524"

1) x+y

2) "Me"+" You"
Result: "Me You"

- (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

20-10 //returns 10

20-'10' //returns 10

20-'what' //returns NaN
* (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 NaN (Not a Number)

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]
document.write(scores.join(", ")+"<br />")

for (var i=0; i<scores.length; i++){
 if (scores[i]%2==1) //odd number?
  document.write("<b>odd, </b>")
 else
  document.write("<b>even, </b>")
}

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: ++x), it increments the operand and evaluates to the incremented value.

2) Post increment: If operator is used following operand (ie: x++), it increments the operand but evaluates to the unincremented value.

Using x=2 for each example below:

1) x++
Result: x=3

2) y= ++x
Result: 3

3) y= x++
Result: y=2

-- decrement Decrements the operand by 1. Note the following two possible behaviours:

1) Pre decrement: If operator is used before operand (ie: --x), it increments the operand and evaluates to the incremented value.

2) Post decrement: If operator is used following operand (ie: x--), it increments the operand but evaluates to the unincremented value.

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
x remains 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
x remains 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().


Reference List

Partners
Right column

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.