Performing JavaScript addition may seem like a simple task, until you discover the number of different ways you can add them. Mathematical calculations are often critical operations that require extreme precision. Websites that sell products, for instance, cannot remain credible by overcharging a customer a few pennies because of an erroneous JavaScript addition. Learning how to add numbers correctly can help you create trustworthy websites that manipulate numerical data efficiently.

JavaScript Typing

Unlike strongly typed programming languages such as C#, JavaScript is loosely typed and allows you to assign any data type to a variable without giving the variable a specific type. In JavaScript, for example, you can assign a number to a variable named "x" as easily as you can assign the word "apple" to it. This flexibility allows you to create programs without worrying about type declarations. However, loose data typing also has drawbacks, because you could also attempt to add the number 2 in one variable to another variable whose value is "apple." This cannot happen in a strongly typed programming language.

Basic JavaScript Addition

The following code adds two numbers and stores the result in a variable named "sum":

var x = 1; var y = 2; var result = x + y;

The result is "3" in this simple example. Add numbers in JavaScript by placing a plus sign between them. You can also use the following syntax to perform addition:

var x+=y;

The "+=" operator tells JavaScript to add the variable on the right side of the operator to the variable on the left.

After adding "y" to "x," JavaScript stores "11.234" in the "z" variable. You can control the number of decimal points that appear in a result by using the "toFixed" function. Instead of adding "x" to "y," use the following syntax instead:

var z = (x+y).toFixed(2);

The "toFixed" method formats the result so that it only displays two decimal points. Change "2" to any other number to make that many numbers appear after the decimal point.

Adding Text Data

You may have discovered a frustrating problem when attempting to add the numbers entered into text boxes. Text boxes contain string data, and JavaScript manipulates them as strings. The following code appends two strings using the plus operator:

var x = "Apples" + "Oranges";

The "x" variable contains "ApplesOranges" after the code runs. The same thing happens if you perform the following addition using numbers entered into two text boxes whose ID values are "text1" and "text2":

If the first text box contains "1" and the second text box contains "2," JavaScript appends those two values instead of adding them, and stores "12" in the "z" variable. Prevent this from occurring use the Number function, as shown below:

var z = Number(x) + Number(y);

The result in this instance is 3.

Precision

While processing data, your application may need to round numbers and eliminate decimal points. The Math.Round method performs this task, as demonstrated in the following example:

var x = 1.4 var y = 1.2; var z = Math.round(x+y);

Adding "x" and "y" here normally yields 2.6 as the result. However, if you use Math.Round to perform the addition, JavaScript rounds the value to 3. This method, which works in all browsers, rounds numbers to the next integer if the result is 0.5 or greater.

Resources

Photo Credits

PhotoObjects.net/PhotoObjects.net/Getty Images

About the Author

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.