Data Type and Type Conversion in JavaScript

JavaScript is a loosely typed language. That means you don't have to specify the data type of a variable when you declare it, and you can assign new data of a different type to the same variable. Also, under some circumstances JavaScript will perform automatic type conversion. On the other hand, you may occasionally trigger a type error by providing the wrong data type.

How do you know when you need data of a particular type? How can you determine the type of data currently held in a variable? We cover these subjects on this page, starting with the typeof operator.

The typeof Operator

The typeof operator returns a string describing the data type of its operand. It will return either string, number, boolean, undefined, function, or object. Here are a couple of examples:

var val; // no value assigned
console.log( typeof val ); // undefined

val = 12; // integer assigned
console.log( typeof val ); // number

The following demonstrates use of the typeof operator in a code branch:

if ( typeof val == 'number' ) {
    // code to handle number here

The typeof operator is best suited for distinguishing between the primitive types (strings, numbers, booleans, and undefined), and between primitive types and objects. It is not helpful in determining the type of object. For example, typeof array is object, as is typeof null. The instanceof operator can tell you whether your data is an array, as the following demonstrates:

var ar = ['a', 'b', 'c'];
if ( ar instanceof Array ) {
    console.log( ar.join(', ') ); // a, b, c

Avoiding Type Errors

Perhaps you have heard the phrase: "Everything in JavaScript is an object." Consider for example, a string, which is a primitive value. But JavaScript also has a String class that provides methods for strings. You use dot syntax to invoke a string method on string data. For that moment, the string acts like an object, an instance of the String class. If you invoke a string method on non-string data, a TypeError will be triggered.

Suppose we forget that the variable declared above was assigned a number and we invoke a string method on it:

console.log( val.toUpperCase() );
// TypeError: val.toUpperCase is not a function

When a particular data type is required in your code it is always best to check first. Or you can convert the data to the desired type.

Explicit Type Conversion

String(), Number(), Boolean(), and Object() functions can be used to convert data from one type to another. For example, we can take the variable defined above, momentarily convert it to a string, and access the string length property to see how many characters it holds:

// using variable defined above, assigned value 12
console.log( String(val).length ); // 2
// check type of val
console.log( typeof val ); // number

Notice that the String() conversion function does not change the type of the variable, but returns its value converted to string. So when we check the type of the variable in the next line, it is still number.

parseInt and parseFloat

The parseInt and parseFloat functions return numbers from strings that start with numeric data. We provide several examples here:

var str = '180px';
var num = parseInt(str);
console.log( num ); // 180

console.log( parseInt(' -2 degrees') ); // -2
console.log( parseInt('$40 dollars') ); // NaN
console.log( parseInt('+14.25 pounds') ); // 14

console.log( parseFloat(' +14.25 pounds') ); // 14.25
console.log( parseFloat('1,234 people attended') ); // 1 

Leading and trailing spaces are ignored, and the string can start with a positive or negative sign. The parseInt function accepts a second argument for specifying radix (i.e., base, which defaults to 10 if not passed). Strings passed to parseFloat can contain a decimal point and exponent.

When JavaScript can't convert the passed string to a number, NaN is returned. The isNaN function is used to check the return value of parseInt and parseFloat, as the following demonstrates:

var str = '124.85';
var num = parseFloat(str);
// check for NaN
if ( !isNaN(num) ) {
    console.log('Your total is: $' + num); // Your total is: $124.85

Automatic Type Conversion

Some operators or statements expect data of a particular type and will perform automatic type conversion. For example, JavaScript expects a boolean in a conditional expression. So JavaScript will temporarily convert the value in parentheses to a boolean to evaluate the if expression:

if (val) {
    console.log( 'yes, val exists' );

The following values evaluate to false: 0, -0, '' (empty string), NaN, undefined, and null. All other values evaluate to true, even empty arrays and objects.

Type conversion is also performed when comparing values using the equal (==) and not equal (!=) operators. So when you compare the number 12 with a string '12' using the equals (==) operator, the expression evaluates to true:

console.log( 12 == '12' ); // true

Type conversion is not performed when using the identical (===) and not identical (!==) operators.

When using the plus sign operator (which JavaScript uses for both addition and concatenation) with string and number operands, JavaScript converts the number to a string and concatenates the two:

console.log( 2 + '2' ); // 22

When using an arithmetic operator on string and number operands, JavaScript will convert the string to a number:

console.log( 2 * '2' ); // 4

When JavaScript can't convert the string to a number, the result will be NaN:

console.log( 2 * 'x' ); // NaN

Back to top