Let’s have a look in details about loose typing and type coercion in JavaScript. In front-end development, especially when it comes to JavaScript there are many strategies, many patterns and many methods to make a well working program or an app that can execute on a browser smoothly.

Developers adopt several methodologies to create their code and many of them do so in the languages such as Java, C, C++, C# which are evergreen with their features. Although JavaScript plays an important part there as well, these languages are strongly typed.

Now when a developer works on JavaScript only, then he or she finds that many things are relatively different as compared to strongly typed languages.

Now when we talk of loosely or strongly typed languages, then what they actually mean by that? Let us explore some of the key features and points considering loosely and strongly typed languages.

Let’s have a detailed look at loose typing and type coercion with examples:

Let’s have detailed info on loose typing first.

Loose typing:

Loose typing is nothing but the variables which have no types or in other words, if we say, then the variables declared without the type is known as loosely typed. JavaScript is one such language which supports loose typing.

Let us look over some examples to clarify more about the concept.

// JAVA SCRIPT WAY (loosely typed) var someText = ‘Hello World’; var someNumber = 121; // STRONGLY TYPED WAY String someText = ‘Hello World’; int someNumber = 121; 1 2 3 4 5 6 7 8 // JAVA SCRIPT WAY (loosely typed) var someText = ‘ Hello World ’ ; var someNumber = 121 ; // STRONGLY TYPED WAY String someText = ‘ Hello World ’ ; int someNumber = 121 ;

In the example above, we see that JavaScript has allowed declaring the variables someText and someNumber with the type as var. There is no information regarding their datatypes. This is because JavaScript is smart enough to identify the type of the variables internally.

The variable someText is considered as String and variable someNumber is taken as a number.

JavaScript is capable to identify some other data types including Boolean, Array, Object, Function, RegExp, Null and Unidentified as well, in which it has categorized them as primitive, objects and special cases.

Now let us know one more feature of JavaScript which is Type Coercion. Type Coercion is simply the process to convert a value from one type to another.

Type Coercion in detail:

Type Coercion is the simple feature to convert the types from one to another. This feature allows reading the expressions from left to right. When the String is identified in between then all the next consecutive values after this point are taken as String.

So, all that values that occurred earlier than the first String are evaluated as per the operations applied to them and next to the String value, all others are concatenated as a single unit of String.

This will become much clearer using this example below:

CASE 1: Consider all numbers –

// JavaScript Type Coercion 5+ 9+ 1+ 35 1 2 // JavaScript Type Coercion 5 + 9 + 1 + 35

This will give the output as 50 which is a number. The operation performed here is of adding all of them.

CASE 2: Consider all numbers but last one as a string

// Last value is a string. 5+9+1+’35’ 1 2 // Last value is a string. 5 + 9 + 1 + ’ 35 ’

This will result in as 1535 because the last value is a string. Although it is the first string encountered when proceeding from left to right and does not have any other value after it so the result will be 1535.

CASE 3: Consider all numbers but last one as a string in between

// One value is a string in between 5+’9’+1+35 1 2 // One value is a string in between 5 + ’ 9 ’ + 1 + 35

This will result as 59135. Kindly note the difference here. The result is 59135 which you will note that, after 5, the first string was spotted and hence after this point, every other value has been converted to a string and all are clubbed together as a single unit.

NOTE: The above example and text is the simple explanation to understand the type coercion. Type coercion’s usage is much broader in itself.

Type coercion can also be used on Boolean expressions, Objects, and Arrays, while comparisons and certain other operations.

Some Examples:

1 == true // This will result as true 1 === true // This will result as false [1] > null // This will result as true new Date(0) – 0 // This will result as 0 null == '' // This will result as false 1 2 3 4 5 1 == true // This will result as true 1 === true // This will result as false [ 1 ] > null // This will result as true new Date ( 0 ) – 0 // This will result as 0 null == '' // This will result as false

One more thing to note here is that conversions can be done on three types only i.e. String, Number, and Boolean. Logics to convert the primitives and the objects are somewhat different but they follow the same rule of converting them to these three types of conversions only.

Some Conversion rules to check:

STRINGS:

Values can be converted to String explicitly or implicitly. Explicit conversion takes place by using String() method. Examples:

String(455); // This will give the result as “455” which is a string. String(true); // This will give result as “true”. String(false); // This will give result as “false”. String(undefined); // This will give result as “undefined”. String(null); // This will give result as “null”. 1 2 3 4 5 String ( 455 ) ; // This will give the result as “455” which is a string. String ( true ) ; // This will give result as “true”. String ( false ) ; // This will give result as “false”. String ( undefined ) ; // This will give result as “undefined”. String ( null ) ; // This will give result as “null”.

Implicit conversion is done by using binary operator +. Examples:

455+”; // This will result as “455”. true+”; // This will result in “true”. false+”; // This will result as “false”. undefined+”; // This will result as “undefined”; null+”; // This will result in “null”; 1 2 3 4 5 455 + ” ; // This will result as “455”. true + ” ; // This will result in “true”. false + ” ; // This will result as “false”. undefined + ” ; // This will result as “undefined”; null + ” ; // This will result in “null”;

BOOLEANS:

Values can be converted to Boolean implicitly and explicitly. Explicit conversion can take place by using Boolean() function. Example :

Boolean(455); // This will result as true. 1 Boolean ( 455 ) ; // This will result as true.

Implicit conversion happens by utilizing logical operators. Example:

!! 455 // This will result as true. 1 ! ! 455 // This will result as true.

Rest, I leave up to you to experiment with all the Boolean expressions.

NUMERIC:

Explicit numeric conversion occurs by using Number() function. Example:

Number(‘455’); // This will result as 455. Number(‘Hello’); // This will result as NaN. Number(true); // This will result as 1. Number(false); // This will result as 0. Number(‘-455’); // This will result as -455. 1 2 3 4 5 Number ( ‘ 455 ’ ) ; // This will result as 455. Number ( ‘ Hello ’ ) ; // This will result as NaN. Number ( true ) ; // This will result as 1. Number ( false ) ; // This will result as 0. Number ( ‘ - 455 ’ ) ; // This will result as -455.

NOTE:

1. When a value is converted from String to Number, then the browser engine first trims the first and last whitespaces associated with the string. Now after this, if the value is not found to be a number, then it simply returns NaN. If the String is empty then, it returns 0.

2. null, when evaluated as Number(null), then it returns 0 and if same is done with undefined such as Number(undefined) then it returns NaN.

3. Numeric conversion does not happen when we try to compare null or undefined with any value. They are comparable to themselves only. Example:

null == 455; // This will result as false. null == null; // This will result as true. null == undefined; // This will result as true. undefined == null; // This will result as true. undefined == undefined; // This will result as true. 1 2 3 4 5 null == 455 ; // This will result as false. null == null ; // This will result as true. null == undefined ; // This will result as true. undefined == null ; // This will result as true. undefined == undefined ; // This will result as true.

4. NaN is something, that is not comparable to any other values. This applies to itself as well.

Example:

NaN == 455; // This will result as false; NaN == NaN; // This will also result as false; 1 2 NaN == 455 ; // This will result as false; NaN == NaN ; // This will also result as false;

Conclusion:

These two are the cool features of JavaScript that can be used carefully. Type Coercion and Loose typing allow JavaScript to be much more popular among the developers’ community all around the world.

I have tried to describe loose typing and type coercion in javascript with examples in the simplest way and I hope it is very clear to you. If you have any doubt or queries ask me in the comment section.

Habilelabs is the industry expert in javascript and providing high-quality web development and mobile development services from a long time. Contact us to discuss your project.