Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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

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:
• Easy Picture Zoom Code
• Introduction to HTML5 Canvas
• Disable IE8 Accelerators on Your Website
• Java Script Code to Re-arrange Items in a Select List
• Regular Expression Basics : How many Matches?
• JavaScript to Add and Remove Rows and Cells from a Table
• Easy Expanding Menu Code
• JavaScript Code for Binary to Hexadecimal - Hexadecimal to Binary Conversion
• Where Did the User Click?
• Code for Java Script Cube / Box Volume Calculator

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-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268