JavaScript Types
Before we start lets clear one thing up: JavaScript static types are purely figments of our imagination. At the end of the day JavaScript doesn’t associate variables with any certain data type. With TypeScript we can make the compiler care about data types, giving dynamically typed JavaScript more of a static typed feel for all of us Java and C programmers out there. Because TypeScript gives us the option to enforce data types I wanted to reiterate the types of JavaScript and stress the importance of knowing them before moving to TypeScript.
Primitives versus Objects
Before diving into the explicit data types I wanted to start with the basics. In JavaScript there are two major overarching data types: primitives and objects. These are core computer science ideas so I wont spend much time on this but if you need a refresher a primitive is data that is not an object and has no methods. A language can have built in support for primitives or basic type primitives, which are the building blocks developers are given to construct their programs out of, or a combination of both built in and basic type primitives.
The JavaScript Primitives
As of ES6 JavaScript gives us six primitive data types to work with:
- Boolean: True or false. Empty strings, undefined, null, 0, and NaN are false.
- Number: A number with or without decimals. Always stored as a double floating point number.
- String: Characters or text inside of quotes. Can also be empty.
- Null: Think of this as nothing and no it’s not an object! Keep reading for a clarification between undefined and null.
- Undefined: A variable that has no value.
- Symbol: A unique(immutable) value that identifies object properties. New in ES6.
The Relationship Between Null and Undefined
Null versus undefined is one of the odd parts of JavaScript that always strikes me as outright strange, but there are a few differences. The first difference is when we use the JavaScript typeof function, undefined is a type of undefined while null is a type of object. This is also seen if we try to compare undefined and null using strict(===) and loose(==) equality. Since type of null returns a type object that must mean null is an object right? Wrong. Null being a type of object is a quirky little bug of JavaScript that was never fixed due to the legacy code it would break. Feel free to read the full history of this here.
typeof undefined // type undefined
typeof null // type object
null === undefined // type comparison is false
null == undefined // type coercion makes this trueSo how do I recommend keeping these two similar primitives separate in your head? Remember that JavaScript will never initialize a variable to null, it is only possible programmatically, in other words, undefined is for absent values while null is for non-initialized values.
The JavaScript Object
Finally we come to JavaScript’s last data type, the object. In JavaScript arrays are objects, as is null but we clarified that above. An object is a collection of properties stored in key/value pairs. Objects can contain primitives, other objects, functions, your lost car keys, or aliens from the fourth dimension. This is what confused me the most when I was learning JavaScript. Objects can contain all sorts of data and types, because of this objects are extremely powerful but can also become very large, messy, and confusing. For the context of TypeScript know that objects are a complex data type, if you want to know more check out the docs.
How Does This Transfer to TypeScript?
Congratulations on making it through! Hopefully you have a clear understanding of data types in JavaScript now. These types are common across many programming languages and experienced programmers probably fully understand these types without needing to read the article. Know that understanding the pre-defined types available to TypeScript is essential for taking full advantage of this JavaScript superset.
