DEV Community

loading...
Cover image for Type System for Javascript

Type System for Javascript

melodyleonard profile image melodyLeonard ・3 min read

JavaScript is a dynamically-typed language. What this means is that it performs type checking at runtime.

Take for instance a language like java or C++ which is a statically-typed language. Type checking in such language is performed at compile time. This is very useful as it warns the programmer of all type errors before the code executes successfully. This way, programmers are subjected to writing lesser error codes.

In C++ you would have to define a variable type before using it; You cannot assign a variable with the wrong data type. Hence, it ensures all your variables are checked to make sure they have the right datatype before the code is compiled.

For example, in C++, you would define an integer as:

int amount = 200;
Enter fullscreen mode Exit fullscreen mode

this is correct and would compile successfully, then run successfully as well because 200 is an integer.

On the other hand, if you tried to declare

int amount = 200;
Enter fullscreen mode Exit fullscreen mode

this would fail at compile-time and you would have a compile-time error. Now this error is very useful as it warns you of a bug in your code before the program runs; helping you to fix it and preventing you from pushing a buggy code out for production.

JavaScript has a different approach to assigning a datatype to a variable. JavaScript allows the kind of data being stored to define datatype at any given time.

For instance in JavaScript, if you define a variable:

var amount =   200;
Enter fullscreen mode Exit fullscreen mode

then later do:

var amount = 200
Enter fullscreen mode Exit fullscreen mode

...both cases would compile successfully and even run successfully.

Now the fact that this compiles and runs successfully does not mean the code run as intended.

For a real world application, this simple bug could be a huge threat to the life of an organization.

In the first instance, JavaScript would infer the type of the variable amount to be an integer. Later this type inference would get overwritten and JavaScript would infer the amount to be a string in the second instance.

If this code was part of a software handling some financial transactions, were the total amount in a certain user account is to be the sum of all the money coming in to the account. Then the outcome of the total amount in any user account would be wrong.

For example if:

var prevAmount = 500;

var currAmount = 200

var totalAmount = prevAmount + currAmount

console.log(totalAmount)
Enter fullscreen mode Exit fullscreen mode

Now the program is expected to have 700 as the total amount but because the prevAmount is an integer and the currAmount is a string, JavaScript performs an implicit conversion on prevAmount, which becomes a string. Then concatenation is done on both instead of expected addition.

Therefore:

totalAmount = 500200
Enter fullscreen mode Exit fullscreen mode

...This gives the user more money than should and puts the organization at risk.

IMPLICIT VS EXPLICIT CONVERSION

An implicit conversion is a conversion done by a language to change a datatype to another datatype so they can perform a certain operation. This is very possible in JavaScript because during variable initialization, datatype is not defined. Instead the datatype of a variable is established from the kind of data the variable holds

Whereas an explicit conversion is a conversion stated by a programmer to change the datatype of a variable intentionally.

An example of an explicit conversion would be:

var totalAmount = prevAmount.toInt() + currAmount.toInt()
Enter fullscreen mode Exit fullscreen mode

By performing the explicit conversion, each amount would be converted to an integer before addition is done.

Now you may ask:
"Why can’t I just do this and avoid using a type checker for my code".

Well you can but you would have to remember to do so in every part of your code where necessary and also, your code would still compile even though you forget to do so in some instance. This means that you are prone to getting unintended results.

We want to avoid a buggy code compiling as much as possible .
We want all errors fixed before our code finally runs. So that when it finally does, we know for sure we are not having unintended behaviors from type errors.

The differences between static type checking and dynamic type checking can be seen when a type error occurs. In a statically-typed language, type errors occur during compile time.

Whereas in dynamically-typed languages, the errors occur only once the program is executed. That is, at runtime.

This means that a program written in a dynamically-typed language (like JavaScript or Python) can compile even if it contains type errors that would otherwise prevent the code from running properly.

On the other hand, if a program written in a statically-typed language (like Java or C++) contains a type error, it will fail to compile until the error has been fixed.

The two powerful most used tools that helps you perform type-checking in JavaScript are:

  • Flow

  • Typescript

Discussion (0)

pic
Editor guide