Prev
Home
Next
Menu

JS Data Types

JS variables may contain many data types such as numbers, strings, objects, arrays, booleans etc.

var num = 10;  // number
var str = "Sandy";  // string
var obj = {fname: "Robin", lname: "Smith"}; // object
var books = ["Story", "Text", "Reference"]; // array

JS has dynamic types. This means that the same variable can be used to hold different data types.

 var t;            // t is undefined
 t = 10;           // t is a number
 t = "Robin";      // t is a string
 

 

JS Type Conversion

JS allows a variable to hold any data type at any time. A variable can be assigned a string initially and then be reassigned to an integer. JS also attempts to perform all necessary types of conversions.

 

Converting to a String

Booleans, numbers, and strings all have a toString() method to convert their value to a string.

The Boolean toString() method simply outputs the string “true” or “false”.

var bFound = false;
alert(bFound.toString());    // outputs “false”

The Number toString() method has two modes: default and radix mode.

In default mode, the toString() method outputs the numeric value in an appropriate string.

var iNum1 = 10;
var fNum2 = 10.0;
alert(iNum1.toString());     // outputs “10”
alert(fNum2.toString());     // outputs “10”

In default mode, the Number’s toString() returns the decimal representation of the number.

When using Number’s toString() method in radix mode, it is possible to output the number using a different base, such as 2 for binary, 8 for octal, or 16 for hexadecimal. This functionality is useful for dealing with numbers in HTML. HTML uses hexadecimal representations for each color.

Examples

var iNum = 10;
alert(iNum1.toString(2));
alert(iNum1.toString(8));
alert(iNum1.toString(16));

 

Converting to a Number

JavaScript has two methods for converting non-number primitives into numbers: parseInt() and parseFloat().

parseInt() converts a value into an integer.

parseFloat() converts a value into a floating-point number. It also has a counterpart named parseDouble() for better precision.

These methods only work properly when called on strings; all other types return NaN (Not-a-Number).

 

JavaScript NaN Property

The NaN property is a special value representing Not-a-Number. This property is used to indicate a value is not a legal number. A number object may be set to this value to indicate that it is not really a number. We use the isNaN() global function to see if a value is an NaN value.

Syntax:

Number.NaN

Example. Using NaN to indicate that a value is not a number
<script type="text/javascript">
var month=30;
if (month < 1 || month > 12)
{
     month = Number.NaN;
}
document.write(month);
</script>

Output:

NaN

 

Using parseInt()

The parseInt() method starts with the character in position 0 and determines if this is a valid number. If it isn’t, the method returns NaN and doesn’t continue. If it is valid, the method goes on to the character in position 1. This process continues until a character isn’t a valid number. parseInt() takes the string up to that point and converts it into a number.

For example:

parseInt(“1234AAA”) returns 1234 because it stops processing one it reaches the character A.

Any number literal contained in a string is also converted correctly.

The string “0xA” is properly converted into the number 10.

The string “22.5” will be converted to 22, because the decimal point is an invalid character for an integer.

var iNum1 = parseInt(“1234blue”);
var iNum2 = parseInt(“0xA”);
var iNum3 = parseInt(“22.5”);
var iNum4 = parseInt(“blue”);

The parseInt() method also has a radix mode, allowing us to convert strings in binary, octal, hexadecimal, or any other base into an integer. The radix is specified as a second argument to parseInt().

var iNum1 = parseInt(“AF”, 16);
var iNum1 = parseInt(“10”, 2);
var iNum2 = parseInt(“10”, 8);
var iNum2 = parseInt(“10”, 10);

If decimal numbers contain a leading zero, it’s always best to specify the radix as 10 so that we won’t accidentally end up with an octal value.

var iNum1 = parseInt(“010”);        //returns 8
var iNum2 = parseInt(“010”, 8);     //returns 8
var iNum3 = parseInt(“010”, 10);    //returns 10

 
Using parseFloat()

The parseFloat() method starts in position 0. It continues until the first invalid character and then converts the string it has seen up to that point. The decimal point is a valid character the first time it appears. The string “22.34.5” will be parsed into 22.34.

The string must represent a floating-point number in decimal form, not octal or hexadecimal. This method ignores leading zeros. The hexadecimal number 0xA will return NaN because x isn’t a valid character for a floating-point number. There is also no radix mode for parseFloat().

var fNum1 = parseFloat(“1234AAA”);
var fNum2 = parseFloat(“0xA”);
var fNum3 = parseFloat(“2.5”);
var fNum4 = parseFloat(“2.34.5”);
var fNum5 = parseFloat(“0908”);
var fNum6 = parseFloat(“blue”);

 

Type Casting

Type casting allows we to access a specific value as if it were of a different type.

Three type casts are available in JavaScript:

Boolean(value) — casts the given value as a Boolean

Number(value) — casts the given value as a Number (either Integer or Float/Double)

String(value) — casts the given value a String

 

Casting to Boolean value

The Boolean() type cast returns true when the value is a string with at least one character, a number other than 0, or an object;

The Boolean() type cast returns false when

  1. the value is an empty string,
  2. the number 0,
  3. undefined, or
  4. null.

See the code below:

<html>
<body>
<script type="text/javaScript">
var b1 = Boolean("");           //false -- empty string
var b2 = Boolean("JavaScript"); //true -- non-empty string
var b3 = Boolean(100);          //true -- non-zero number
var b4 = Boolean(null);         //false -- null
var b5 = Boolean(0);            //false -- zero
var b6 = Boolean(new Object()); //true -- object
document.write("Value1= " + b1 + '<br>')
document.write("Value2= " + b2 + '<br>')
document.write("Value3= " + b3 + '<br>')
document.write("Value4= " + b4 + '<br>')
document.write("Value5= " + b5 + '<br>')
document.write("Value6= " + b6 + '<br>')
</script>
</body>
</html>

Output

Value1= false
Value2= true
Value3= true
Value4= false
Value5= false
Value6= true

 

Casting to Boolean Number

The Number() type cast works in a manner similar to parseInt() and parseFloat(). Except that it converts the entire value, not just part of it. parseInt() and parseFloat() only convert up to the first invalid character (in strings),so “4.5.6” becomes “4.5”. Using the Number() type cast, “4.5.6”. If a string value can be converted entirely, Number() decides whether to use parseInt() or parseFloat().

See the code below [Number.html]:

<html>
<body>
<script type="text/javaScript">
var b1 = Number(false)          
var b2 = Number(true)          
var b3 = Number(undefined)       
var b4 = Number(null)      
var b5 = Number("5.5")         
var b6 = Number("56")
var b7 = Number("5.6.7")
var b8 = Number(new Object())
var b9 = Number(100)

document.write("Value1= " + b1 + '<br>')
document.write("Value2= " + b2 + '<br>')
document.write("Value3= " + b3 + '<br>')
document.write("Value4= " + b4 + '<br>')
document.write("Value5= " + b5 + '<br>')
document.write("Value6= " + b6 + '<br>')
document.write("Value7= " + b7 + '<br>')
document.write("Value8= " + b8 + '<br>')
document.write("Value9= " + b9 + '<br>')
</script>
</body>
</html>

Output

Value1= 0
Value2= 1
Value3= NaN
Value4= 0
Value5= 5.5
Value6= 56
Value7= NaN
Value8= NaN
Value9= 100

 

Casting Type to String

When casting type to string, JavaScript simply calls the toString() method. The type cast can produce a string for a null or undefined value without error.

See the example below:

var s1 = String(null);    //”null”
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error

Prev
Home
Next