# Arithmetic Operations

One of the fundamental ways you can derive information from numeric data is to
manipulate them arithmeticallyâ€”to process the data through addition,
subtraction, multiplication, division, and combinations of these operations.
JavaScript permits arithmetic calculations through the use of various **arithmetic
operators** applied to numeric variables and literal values. The following table
lists and describes the common arithmetic operators.

Operator Action + Adds two numbers together - Subtracts one number from another or changes a number to its negative * Multiplies two numbers together / Divides one number by another % Produces the remainder after dividing one number by another

Figure 2-9.JavaScript arithmetic operators.

### Addition

JavaScript can add together two or more numeric variables and/or numeric constants by
combining them in an **arithmetic expression** with the arithmetic operator for addition
( **+** ). The result derived from evaluating an expression can be
assigned to a variable for temporary memory storage.

The following statements declare variables **A** and **B
** and assign them numeric values; variable **Sum** is declared for
storing the result of evaluating the arithmetic expression that adds these two variables.
Additional examples of addition operations using variables and literal numeric values are
shown.

`var A = 20; var B = 10; var Sum = A + B; var Sum1 = 1 + 2; var Sum2 = A + 2 + B + 1; var Sum3 = Sum1 + Sum2;`

The addition operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
Script: |

**Figure 2-10.** Performing addition.

### Subtraction

The subtraction operator (** - **) is used in the same fashion as the
addition operator. Variables and/or literal numeric values are combined with the operator to
subtract values in an expression, the result of which can be assigned to a variable.

`var A = 20; var B = 10; var Difference = A - B; var Difference1 = 2 - 1; var Difference2 = A - 3.5 - B; var Result = Difference1 - Difference2;`

Of course, you can combine addition and subtraction in the same arithmetic expression. These operations are carried out in the order in which the expression is evaluated from left to right.

The subtraction operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
Script: |

**Figure 2-11.** Performing subtraction.

### Multiplication

Multiplication between numeric variables and/or literal values is accomplished with the
multiplication operator ( ***** ), examples of which are shown below.

`var A = 10; var B = 20; var Product = A * B; var Product1 = 1 * 2; var Product2 = A * 3.5 * B; var Result = Product1 * Product2;`

The multiplication operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
Script: |

**Figure 2-12.** Performing multiplication.

### Division

Division is accomplished with the divide operator ( **/** ). The value
preceding the operator (dividend) is divided by the value following the operator (divisor) to
produce the quotient.

`var A = 10; var B = 2; var Quotient = A / B; var Quotient1 = 10 / 2; var Quotient2 = A / 3.5 / B; var Result = Quotient1 / Quotient2;`

The division operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
Script: |

**Figure 2-13.** Performing division.

A special type of division known as **Modulus** division returns the *remainder* in a
division operation. In the following example, when 10 is divided by 3, the quotient is 3 and the
remainder is 1.

Computer Memory:
Script: |

**Figure 2-14.** Performing Modulus division.

The Modulus division operation can be used to determine if one number is equally divisible by a second number. If the remainder is 0, then the quotient is a whole number. In other cases, Modulus division can be used to produce a fractional remainder rather than a decimal number. In the above example, the quotient can be expressed as 3 1/3 rather than 3.333.

### Operator Precedence

When an arithmetic expression is evaluated, there is a given order in which the operations are
carried out. This order is called **operator precedence**. Multiplication and division take
precedence (are done first) over addition and subtraction, moving from left to right through the
expression. This order has important impact on whether or not you get the results expected.
Consider the following declarations and assignments.

`var X = 5; var Y = 3; var Z = 2;`

If you used the arithmetic expression,

`var Answer = X - Y * Z;`

then the resulting answer would be **-1**. First, **Y**
is multiplied by **Z** to get **6**; then **
6** is subtracted from **5** to get the answer **-1**. Suppose,
however, that you really intended to *first* subtract **Y** from
**X** and then multiply by **Z** to produce the answer
**4**. The above expression will not work to produce this result
because multiplication takes precedence over subtraction and is performed first, even though
it is the last operation in the expression.

Often, therefore, you need to override operator precedence and explicitly control the
order of evaluation of an expression. This is done by using parentheses **( )**
to govern the sequence in which arithmetic operations are carried out. In the above example,
you would use the statement

`var Answer = (X - Y) * Z;`

to produce your expected results. A good general rule to follow when composing arithmetic
expressions is *always* to override operator precedence. Use parentheses to explicitly control the
order in which arithmetic operators are evaluated. As in normal arithmetic computations, evaluation
of expressions takes place from the inner-most to the outer-most sets of parentheses.

### Other Arithmetic Operators

Other specialized arithmetic operators permit a variable to be used in the calculation of its replacement value. In other words, you can add to or subtract from a variable (or perform other arithmetic operations on the variable), and put the resulting value back into the variable. The following table gives these additional assignment operators which combine computation and assignment in the same operator.

Operator | Action |
---|---|

++ |
X++The equivalent of X = X + 1; add
1 to X, replacing the value of X |

-- |
X--The equivalent of X = X - 1; subtract
1 from X, replacing the value of X |

+= |
X += YThe equivalent of X = X + Y; add
Y to X, replacing the value of X |

-= |
X -= YThe equivalent of X = X - Y; subtract
Y from X, replacing the value of X |

*= |
X *= YThe equivalent of X = X * Y; multiply Y by X,
replacing the value of X |

/= |
X /= YThe equivalent of X = X / Y; divide
X by Y, replacing the value of
X |

**Figure 2-15.** Operators to perform arithmetic and reassignment to variables.

For example, it is common programming practice to increment or decrement a variable by 1 using the following statement constructions.

`Counter = Counter + 1; Counter = Counter - 1;`

In the first instance, 1 is added to the current contents of variable **Counter**
and the sum is reassigned to the variable, increasing the value of **Counter
** by 1. In the second case, the value of **Counter** is decreased by
1.

Since these are common arithmetic operations, JavaScript provides special arithmetic
operators to automatically increment or decrement a variable without having to compose the kinds
of calculations and assignments shown above. The operator **"++"** adds
1 to a variable and the operator **"--"** subtracts 1 from a variable
using expressions in the formats,

`Counter ++; Counter --;`

You can use either statement type, however, the latter is easier to write, makes more obvious the purpose of the statement, and shows up often in other types of JavaScript statements where variables are incremented or decremented by 1.

Similar types of operators are available for adding and subtracting a second variable, or multiplying and dividing by a second variable, and reassigning the results to a variable. For example, if the following declarations are made,

`var X = 20; var Y = 10;`

then the expression

X += Y;results in the valueX = 30(Yis added toX)

X -= Y;results in the valueX = 10(Yis subtracted fromX)

X *= Y;results in the valueX = 200(Xis multiplied byY)

X /= Y;results in the valueX = 2(Xis divided byY)

### Basic Script Output

You know enough now to begin writing scripts to perform arithmetic operations. The problem is, you have no way of seeing the results of your processing; they remain hidden inside your scripts.

Later, you are introduced to several different methods to display the results of script processing.
For the time being, a quick and easy way to display script output is with the *
alert()* method. This is a method of the DOM

**window**object and is covered more formally later; for now, you can use it for a quick peek at processing results.

`alert(`

variable|expression);

Figure 2-16.Basic format foralert()method.

In its simplest form, the **alert()** method encloses a variable inside
its parentheses. When this method is called, the value of the variable is displayed in a pop-up
message box. For example, below is a script to perform arithmetic and display the answer in this
pop-up window.

`function DoArithmetic() { var X = 10; var Y = 20; var Z = 30; var Answer = (X + (Y / Z)) / 3.5;`

alert(Answer); }

Listing 2-5.Code to use thealert()method.function DoArithmetic() { var X = 10; var Y = 20; var Z = 30; var Answer = (X + (Y / Z)) / 3.5; alert(Answer); }

The statement **alert(Answer)** displays the value of variable
**Answer**. The message box remains on screen until the user clicks
its "OK" button to close the window and return to the Web page.

As mentioned, you are introduced later to several other ways to display the results of script
processing, some by integrating the output within the Web page itself rather than displaying it
in an external message box. For the time being, though, the **alert()**
method is a handy way to view processing results.

### Formatting Numbers

By default, number displays are carried to their decimal capacity. In the previous two examples,
the computations produce the output **3.0476190476190474**, with
decimal precision carried to 16 positions. You may wish to have greater control over display
precision.

The JavaScript * toFixed(n)* method permits number
formatting rounded to

**number of decimal positions. This method can be applied to literal values, variables, or arithmetic expressions by appending it to these values or computations.**

*n*

value.toFixed(n)variable.toFixed(n)(expression).toFixed(n)

Figure 2-17.Formats to apply thetoFixed()method.

Numbers are rounded to the given number of decimal digits. If there is not a sufficient number of significant (non-zero) digits to display, the number is padded with trailing zeros to the specified length. When applying the method to an arithmetic expression, it is necessary to enclose the expression in parentheses so that the method is applied to the full expression.

The following is a rewrite of the script shown above in Listing 2-5. By applying the
**toFixed(2)** method to the answer, it is displayed as **
3.05**, rounded to two decimal positions.

`function DoArithmetic() { var X = 10; var Y = 20; var Z = 30; var Answer = (X + (Y / Z)) / 3.5; alert(Answer`

.toFixed(2)); }function DoArithmetic2() { var X = 10; var Y = 20; var Z = 30; var Answer = (X + (Y / Z)) / 3.5; alert(Answer.toFixed(2)); }

JavaScript does not supply formatting methods for other standard ways of displaying numbers. For instance, you cannot automatically display comma separators for numbers over 1,000, nor can you automatically insert dollar signs in currency values. The latter can be done through string methods introduced later; the former, however, requires non-trivial programming.

### Basic Script Input

In order to make Web pages responsive to users, there also must be ways through which data values can be input into scripts, rather than simply declaring them as hard-coded values within the script itself. Most Web page processing, in fact, is based on data supplied by users. Later, you are introduced to these input methods to round out the input and output techniques to capture user data for processing and to present output results.

In the meantime, the * prompt()* method can be used for simple
data input. Like the

**alert()**method,

**prompt()**is a method of the

*window*object. It is covered in greater detail later.

variable=prompt("prompt string", "initial value");

Figure 2-18.Basic format forprompt()method.

The **prompt()** method displays a pop-up window enclosing a text box for
data entry. An "OK" button is displayed to submit the entered value to a script; a "Cancel" button
cancels the input. The **" prompt string"** is a label to prompt the
user as to the type of input being solicited; the

**"**can be used to pre-enter data into the text box, either as a default value or as an example of the type of input being solicited. The

*initial value*"**prompt()**method is assigned to a variable to store the entered value.

In its simplest format, the **prompt()** method works as shown in the
following script. The pop-up box asks the user to enter a name. Then the **
alert()** method displays this entered value.

`function Get_Name() { var Name =`

prompt("Enter your name:", ""); alert(Name); }function Get_Name() { var Name = prompt("Enter your name:", ""); alert(Name); }

The string **"Enter your name:"** is used as the prompt; a null value
("") is coded as the initial value of the text box so that no pre-entered
data appears. The **prompt()** method is assigned to variable
**Name** where the entered data is stored.

When the **prompt()** method is encounted in a script, the pop-up
window is displayed and the script waits until the user clicks the "OK" or "Cancel" button. At
that point the value entered into the text box is assigned to variable **Name**,
and the script continues. In this example, variable **Name** is then displayed
in an alert message, simply echoing the entered value back to the user.

Any number of prompt boxes can be displayed from a script. In the following example, two boxes serve for input of two numbers which are multiplied together.

`function Multiply() { var No1 = prompt("Enter the first number:", ""); var No2 = prompt("Enter the second number:", ""); var Product = No1 * No2; alert(Product); }`

function Multiply() { var No1 = prompt("Enter the first number:", ""); var No2 = prompt("Enter the second number:", ""); var Product = No1 * No2; alert(Product); }

If you do not enter valid numbers into the text boxes, the **alert()**
method displays "NaN", shorthand for "not a number." Later, you will learn more elegant ways
to deal with invalid user input.

Although the **alert()** and **prompt()** methods
are relatively crude methods for script output and input, they can serve as a starter kit in making
scripts responsive to user needs.