A Complete Guide to Javascript Types

All languages have different ways to store and present data, and they are usually split up into different types. Javascript also splits different data into different types, which, for example, lets us differentiate as to whether something is a number, or something else. Javascript types should be familiar to you if you've used other languages.

Fundamentally, Javascript is a weakly typed language, meaning we do not define the type of data directly defined in the code. Instead, Javascript decides on the type based on their context in the code. This is frequently called dynamic typing.

Javascript has six primitives:

1. undefined - when something is not defined in the code, or does not exist.
2. number - a number between -2^53 - 1 and 2^53 - 1, i.e. 1.
3. string - a combination of characters i.e. test.
4. boolean - true or false.
5. bigint - a number bigger than 253 - 1.
6. symbol - a completely unique identifier. As well as these, there are two more - function and object.

Why are types important?

In Javascript, and any other language, understanding types are a critical in building functioning applications. Many errors and issues that are common in Javascript are type related. For those reasons, many developers use Typescript, which is a type of Javascript with type controls added on top.

For example, since Javascript infers types based on context, if we write "5", it will be seen as a string, not a number. As such, the following code returns "55", not 10:

let myNumber = "5" + 5; // returns "55"

Similarly, "false" is not exactly equal to false. As you can see from these examples, controlling and checking types in your code is an important part of Javascript.

Checking equivalence with types in Javascript

In Javascript, we have two ways to check equivalence, those being == and ===.

• == - this checks if two values are the same, for example, "5" == 5 is true, 10 == 9 is false.
• === - this checks if two values and their type, are the same. So "5" === 5 is false, but 5 === 5 is true.

If two values in an equivalence check are the same, then the result will return true. Otherwise, it will return false. This is frequently used in logical statements like if() statements. For example, we may use the following code:

if("5" === 5) {
    // This will not run, since "5" is not the same type as 5
}
else if(5 === 5) {
    // This will run instead, since 5 is the same type as 5
}

If instead we want to check if only the type of two things are the same, we can use the typeof keyword. For example, writing typeof 5 === typeof 6 returns true:

if(typeof 5 === typeof 6) {
    // This will run, since typeof 5 is equal to typeof 6.
}

Javascript Primitive Types

Javascript primitive types are the core types of values within Javascript, and the ones we use the most. All values in Javascript are mutable, which means they can be updated and changed. In some languages, like C, values are immutable, but Javascript does not have this constraint.

Javascript undefined type

As it suggests, something is of type undefined in Javascript if it is assigned no value. For example, both of the variables below are undefined:

let x; // undefined, since it has no value defined
let x = undefined; // also of type undefined

Javascript string type

A string in Javascript is a series of characters one after another. If a series of characters are contained within quotation marks, i.e. "" or '', it is presumed to be a string. The below variable is an example of a string:

let myString = 'string';

As mentioned before, keywords like false, or numbers, can also be converted into strings by putting quotation marks around them. As such, the below variable is also a string:

let myString = '5';

Javascript number type

A number type in Javascript is any number that falls within the definition of being a 64 bit double precision floating point value. Ultimately, this means any number between -2^53 - 1 and 2^53 - 1. As well as this, the values Infinity, NaN (not a number), and -Infinity are of type number.

For simplicity, if you want the biggest number Javascript can provide you can use Number.MAX_VALUE in your code instead. Similarly, Number.MIN_VALUE provides the lowest value.

As mentioned above, a number can sometimes be misinterpreted as a string if it has quotation marks around it. If we want to parse a string into a number, we can use the parseInt function to force a string like "5" to be a number:

let myString = '5'; // Returns "5"
let myNumber = parseInt(myString); // Returns 5

Javascript boolean type

A value is considered boolean if it is either set to true or false with no quotation marks. Since Javascript lacks type control, we may sometimes get values which are meant to be boolean, but are actually strings, such as "true". As such, we may sometimes check both "true" and true for boolean values.

Javascript bigint type

In Javascript, a bigint is like a number, with arbitrary precision. You can use it to store large integers safely beyond the 2^53 - 1 limit that the number type has. If we want to create a bigint, we append n to the end of a number. For example, the typeof the variable below will be bigint:

let myBigInt = 1000000000000n

A bigint is not the same as a number - but the values will return true if equivalent. For example, 2n == 2 will return true, while 2n === 2 will return false.

Javascript symbol type

A symbol is an immutable type in Javascript, which is often used as the unique key of an object. As such, when created, a symbol cannot be changed. To define a symbol, we can write the following code:

let mySymbol = Symbol('hello');

Since creating a symbol creates a unique identifier, no two symbols are the same. This can be useful, in some scenarios, but ultimately it means that Symbol('hello') === Symbol('hello') will always return false.

How to check types in Javascript

We can check what type a variable is by using the typeof keyword. typeof returns the string name of the type, as shown below:

let i = 0;

if(typeof i === "number") {
    // Will run this code, since i is of type "number"
}

Let's look at some examples of our types, now that we know about this keyword:

typeof undefined; // Returns "undefined"
typeof 5; // Returns "number"
typeof "hello"; // Returns "string"
typeof true; // Returns "boolean"
typeof BigInt(10000000000000000); // Returns "BigInt"
typeof Symbol("Hi"); // Returns "symbol"
typeof {}; // Returns "object"
typeof function(){} // Returns "function"
typeof null // Null is strangely an "object" type

Truthy and Falsy in Javascript

Since Javascript types are dynamic, it's useful to understand the concept of truthy and falsy. These are words we use to describe things that appear are "false", but not necessarily set to false exactly, such as false, or null, and the opposite, which is known as "truthy".

falsy can refer to any of the following values in Javascript:

// Falsy values in Javascript
NaN          // NaN is falsy
0            // 0 is falsy 
-0           // -0 is falsy
undefined    // undefined is falsy
null         // null is falsy
""           // Empty strings are falsy
''           // Empty strings are falsy
``           // Empty strings are falsy
document.all // document.all is the only falsy object
false        // false is of course falsy

truthy then refers to anything which is not falsy. So for example, while 0 is falsy, any number other than 0 is truthy. Similarly, while an empty string is falsy, a string of any length is truthy. These two concepts are important in Javascript types since there are a number of operators which allow us to change variables based on this information.

Truthy and Falsy Operators

Now that we understand types, and the concept of truthy/falsy, let's look at a real application. Since Javascript has defined truthy and falsy types, we can use specific operators in our code based on these ideas.

Truthy AND operator

The truthy AND operator lets you change the value of something if the value is truthy. That means you can do something like this:

let i = 5 && 6;

Since 5 is truthy, i actually returns a value of 6. Think of the text after the && as a backup variable. If the first value is truthy, then we should use the second one. Otherwise, we'll use the first value if it is falsy.

Logical OR Operator

Similar to the truthy AND operator, the logical OR operator returns the second value if the first is falsy.

In the below example, the number after the || operator is the value returned for j, since undefined is falsy.

let i = undefined || 5;
// since the first value can be converted to false, the value of i is 5.

Nullish operator

While we have two operators for both truthy and falsy types, we have another known as the nullish coallescing operator, which works on only undefined or null values. If the first value is either undefined or null, then we will use the value after ??.

let j = 4 ?? 6;

The above variable returns 4. If we had written undefined ?? 6 instead, the above variable would return 6.

Conclusion

In this article we've looked at types in Javascript in detail. Specifically, we've covered:

1. The different types Javascript uses.
2. Testing types for equivalence in Javascript.
3. Why types are important, and issues that can arise when using them.
4. How to use type based operators to build logic into your Javascript. If you have any suggestions or questions, please reach us on twitter via this link.