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

About BTH User Agreement Privacy Site Map Contact News Feeds

Debugging JavaScript : Coercions

By Stephen Bucaro

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";
alert(x);

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 Type Return Value

Number "number"

String "string"

Boolean "boolean"

object "object"

null "object"

not defined "undefined"

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

var x ="17" * 3;
alert(x);

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");
alert(x);

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");
x.toFixed(1);
alert(x);

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 Type Return Value

isNaN(null) false

isNaN(undefined) true

isNaN(0) false

isNaN(37) false

isNaN("37") false

isNaN(true) false

sNaN(false) false

isNaN("") false

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.

Null A variable has not been assigned a value, not even zero

Undefined The absence of the object or variable itself

Number All numbers, such as 0 and 3.14 and infinity

Boolean The values true and false

String All strings, such as "foo" and ""

More Java Script Code:
• JavaScript to Add and Remove Rows and Cells from a Table
• Calendars for Your Website
• Calculators For Your Web Site : Length Units Converter
• Code to Drag and Drop an Image Anywhere on a Webpage
• Password Protection Using the Frames Method
• Replace Drop-down with Drag-and-drop
• Let Your Web site Visitors Set Font Size
• Code to Block the Ad Blockers
• Calculators for Your Website : Fahrenheit to Celsius Converter
• Change the Case of a Character in a String