Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Debugging JavaScript : Coercions

JavaScript is not a tightly typed language, meaning that you can give it a value without telling it the data type, and it will give it a type to the best of its ability. Sometimes this comes in handy, but other times it can cause problems. One example is when a user enters numerical data in a form. JavaScript returns form entries as strings.

What happens if a user enters the number 3 into a form, and you immediately add 2 to that value, as shown below.

var x = 2 + "3";

You would expect a result of 5, but instead you would get a result of "23". This is because the + operator is overloaded to do string concatenation or addition, depending on its argument types, and it chooses concatenation over addition.

var x = 2 + "3";
alert(typeof x);

The JavaScript typeof operator returns the data type of its operand. In the code shown above, typeof would return "string", which might be a surprise if you were expecting a numerical result. Shown below is a list of possible values returned by the typeof operator.

Argument TypeReturn Value
not defined"undefined"

What happens if you multiply the string by the integer 3, as shown below?

var x ="17" * 3;

You would get a result of 51, which is what you would expect from a purely mathematical calculation. So it seems coercion is not consistent. One solution is to always pass the variable to a Number object before using it in a mathematical operation.

var x = Number(2) + Number("3");

However, the Number object always returns a double-precision floating point number and such a number may have an error based upon the word size of the computer's processor. for example, the following operation should return the value 5.3, but instead returns 5.300000000000001. You can solve that problem using the Number object's toFixed method, as shown below.

var x = Number(2.1) + Number("3.2");

The toFixed method keeps the specified number of digits to the right of the decimal point. However, be aware that it returns a string value.

Generally it would be a good idea, especially if a number is entered from user input, to first check if its a legitimate number. For this you can use the JavaScript isNaN function, which returns true if the value is "not a number". However, isNaN is unreliable because its true operation is to test whether a value cannot be coerced to a number. If a non-numeric value can be coerced to a number, it returns false indicating it is a valid number.

Values returned by isNaN by various argument types:

Argument TypeReturn Value

Note that last one isNaN("") which is confusing because the empty string is converted to 0 which is not NaN. In case you need a refresher, below is a chart of the JavaScript primitive data types.

NullA variable has not been assigned a value, not even zero
UndefinedThe absence of the object or variable itself
NumberAll numbers, such as 0 and 3.14 and infinity
BooleanThe values true and false
StringAll strings, such as "foo" and ""

More Java Script Code:
• Round a Float to 4 Digits to the Right of the Decimal Point
• Java Script Math Object Trigonometric Methods
• Easy Picture Panning Code
• Code to Fade Between Two different Pictures
• Introduction to JavaScript Programming
• Calculators for Your Website : Fahrenheit to Celsius Converter
• How to Disable the Browser Back Button
• Code to Add Music to Your Webpage
• Code for Java Script Cube / Box Volume Calculator
• A Cross-Browser Solution for Handling JavaScript Events

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268