Have you ever wondered how many Javascript Types exist out there? String, Number, Object, Array and that's it, right? Well, no! There is more to Javascript Types than those 4 I just listed. Spoiler alert: we have an infiltrator, one of those is not really a JS Type. But why is it important to know all the different Javascript types, you might ask? Well, as Kyle Simpson said:

Variables don’t have types, but the values in them do. These types define intrinsic behavior of the values.

What this quote means is that the types of the values that you use in your code have a behavior, and if you understand that behavior, you can save some useful time debugging. You will also have a better notion of what is happening in your code and make your application have a better performance just by using the correct Type for your values depending on what you want them to do. Having said that, let's get into the types.

There are nine Types of values in the Javascript world. Yes, 9. undefined, null, boolean, number, bigint, string, symbol, object and function. If you went back to the last sentence looking for the array type, stop it, arrays are objects in Javascript. In this post we will cover only the first 4 types (undefined, null, boolean and number).

console.log(typeof([])); // "object"

Quick parentheses before we begin! I want to first introduce you to the term Primitive values. I could write an entire blog post about Primitive values, but it is important that I at least tell you what they are before continuing to see the fun facts about JS Types. Primitive values can't change, they are immutable. Read-only. The difference between an object and a stringis that the object can change, it is non-primitive value, it has properties which you can access and modify. While the string is just a set of characters that are themselves immutable (you can’t change the value of a anymore than you can change the value of true). There is more to say about this, but for now that’s enough. Moving on!

undefined. There is only one value of that type. Boring.

console.log(typeof(undefined)); // "undefined"

In Javascript, it represents an non-intentional missing value. If Javascript can't find the value you want, it points it to undefined. This can cause trouble! I bet you’ve experienced it yourself. For example if you didn't assign a value to a property on an object, and you try to access it, it will be undefined by default. undefined is a primitive value, you can't change it.

let dog = { name: "Firulais" }
console.log(dog.breed)  // Undefined
console.log(dog.breed.trainability) // TypeError!

The next value Type is undefined's sibling: null. It is very similar to undefined, in that it will break your code if you try to access its properties. Another similarity: there is only one value of its type. And for the geeks that are reading this post, and went to the console to type:

console.log(typeof(null)) 

And got "object" as a result, trust me, it is not! That is the result of a bug introduced long ago and is too expensive to fix. if you are curious, you can read more about it here. null is also a primitive value, and while it is not mandatory, I consider a good practice using null as an intentional missing value. This way you can distinguish between a possible coding mistake, which would be undefined, and intentionally missing data.

Booleans. There is not much to say about them, they have only two values: true and false. They are primitive values. You can perform logical operations with booleans:

let isHusky = true
let isPomeranian = !isHusky
let isDog = isHusky || isPomeranian
let isPomsky = isHusky && isPomeranian

Numbers. You may be tempted to think that numbers are super straight forward right? Input this in your browser's console:

0.1 + 0.7 === 0.8

Whut?! You got false, right? This is because numbers don't behave exactly the same in Javascript than in the real world. There are infinite values for numbers in the real world. This is why it would be impossible to store them in Javascript. Thanks to that, Floating point math was created. You don't need to understand how that works to be a competent Javascript programmer, but it is important that you know that JS math is not entirely the same as real life math. Javascript has limited number values in its own world, and when we use them in our code or do calculations with them, Javascript finds the closest possible number that it knows and uses it, we can say that JS numbers have limited precision. The closer numbers are to zero, the more precise they are.

There are two key numbers in Javascript: Number.MAX_SAFE_INTEGER and Number.MIN_SAFE_INTEGER. Any whole number between those integers are exact.

console.log(Number.MAX_SAFE_INTEGER);     // 9007199254740991
console.log(Number.MAX_SAFE_INTEGER + 1);     // 9007199254740992
console.log(Number.MAX_SAFE_INTEGER + 2);     // 9007199254740992

But we have to be careful when we perform calculations with numbers outside that range or when we use decimal numbers. There can be super small variation between the numbers that we want to use that can add up pretty bad. If you work on a daily basis with calculations, you can look for alternatives to perform them. Check out big.js

Last, but not least. What about NaN(Not A Number), Infinity, -Infinity, -0? Those numbers are part of Floating point math. And they exist because Javascript needs to be able to represent the results of operations like "3 / 0" or "0 / 0". I find it funny that when you do:

console.log(typeof(NaN)) // "number"

Not a Number is a number! There is some science in the Floating point math theory that explains it. For us, it is enough to know that it is a way to represent an invalid result, and that it is considered a numeric value. You might not see these special values very often, but I consider that it is important to know they exist. This way you won't panic when you see them.

That's the first part of Javascript value types. I'll work on the second part of this post where we'll cover bigints, strings, symbols and objects. Once it is done, I'll reference it in this same post. I hope that reading this helps you to avoid some bugs and save you some time finding something weird in your code, or at least that you learn something new. Happy hacking!