A Complete Guide to Javascript Types
Tags: javascript, beginners, webdev, programming
Published: 2022-03-03 17:11:48

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](https://fjolt.com/category/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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```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:

```javascript
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.

```javascript
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 ??.

```javascript
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](https://twitter.com/smpnjn).