# Primitives: Introduction to Javascript Data Types - Part 1 🐥

📙 This article is part of the [Javascript Deep Dive](https://alexzaharia.com/series/javascript-deep-dive) series.

---

So, what data types does Javascript have?

The two main categories are: **primitives** and **objects** (non-primitives).

In this part we will cover the primitives and in the next one the objects.

## Dynamic Types 🌊

Javascript is a dynamically typed language. When you assign a value to a variable you don't specify the type and you can reassign any value to it.

```jsx
var x = 1; // We assign a number
x = "abc"; // We reassign a string
```

The type of a variable will be decided at runtime rather than compile time like statically languages such as `C++` or `Java`.  

## Typeof 🔎

You can use the `typeof` operator to find the type of an element.

```jsx
> typeof "abc"
'string'
> typeof 123
'number'
> typeof {x:1}
'object'
```

## Primitives ⛰

Primitives in Javascript are types that simply hold a value. 

### String 🅰

Strings hold textual data. They are basically a list of chars.

In Javascript unlike C++ there is no `char` type for you to hold only one character. In a string variable you can hold no chars or as many as you want (theoretically the limit is `2^53 - 1` chars which is really big number, unlikely reachable in 99.999% percent of cases) 

Strings are represented as `16-bit` lists of unsigned integers.

They are indexed from `0`.

The length of a String is the number of characters in it. You can access it with `.length`.

You can use single quotes (' '), double quotes (" ") or back quotes (\` \`).

```jsx
var s = ""; // A string with 0 chars
console.log(s.length); // 0

s = "abc"; // A string with 3 chars, "a", "b", "c"
console.log(s.length); // 3
```

### Number 🥇

Numbers hold all kinds of numeric values.

Unlike `Java` where there are types like `int`,`double`, `float` and more to represent integers and floating point numbers, Javascript uses the number type as an umbrella for all of them.

They are represented as `double precision` floating point values. Double precision means that they use `64-bits` instead of `32-bits` the the single floating point precision uses. 

More info about double precision can be found on this wiki page: [Double-precision floating-point format](https://en.wikipedia.org/wiki/Double-precision_floating-point_format)

The values range between `-2^53 - 1 → 2^53 - 1`. 

To get the maximum value use `Number.MAX_VALUE`.

```jsx
> Number.MAX_VALUE
1.7976931348623157e+308
```

To get the minimum value use `Number.MIN_VALUE`.

```jsx
> Number.MIN_VALUE
5e-324
```

There are two three symbolic values that have the number type: `NaN` ,`Infinity` and `-Infinity`.

#### NaN

NaN means "Not a Number".

```jsx
> typeof NaN
'number'
```

It's used to represent unsuccesfull operations with a number or conversions from a non-number type to a number.

```jsx
> 'a' / 2
NaN
> parseInt('a')
NaN
```

Any operation with NaN is a NaN.

```jsx
> NaN + 1
NaN
> NaN * NaN
NaN
> NaN - 'abc'
NaN
> NaN / false
NaN
```

#### Infinity

`Infinity` is a property available on the global scope that represents the infinity value. It is treated as larger than any other number.

The property is initialized to `Number.POSITIVE_INFINITY` value. 

It's note the same as `Number.MAX_VALUE`. 

```jsx
> Infinity > 3
true
> Infinity > Number.MAX_VALUE
true
```

If the result of an operation is too large to contain in memory then it will be shown as `Infinity`.

```jsx
> Math.pow(2, 10000)
Infinity
```

An operation on `Infinity` results either to `Infinity` ,`-Infinity` , `0` or `NaN`.

```jsx
> Infinity + 1
Infinity
> Infinity * -1
-Infinity
> Math.pow(2, Infinity)
Infinity
> Math.pow(0.3, Infinity)
0
> Math.pow(1, Infinity)
NaN
> 0 * Infinity
NaN
```

Division to zero of a non-negative number gives `Infinity`.

```jsx
> 1/0
Infinity
```

#### -Infinity

`-Infinity` is the negative equivalent of `Infinity`.

The property is initialized to `Number.NEGATIVE_INFINITY` value. 

It's note the same as `Number.MIN_VALUE`. 

```jsx
> Infinity < 3
true
> Infinity < Number.MIN_VALUE
true
```

It behaves equivalently to `Infinity`.

```jsx
> Math.pow(2, -Infinity)
0
> -Infinity * 2
-Infinity
> -Infinity + 1
-Infinity
> -Infinity * Infinity
-Infinity
> -Infinity * -Infinity
Infinity
> Math.pow(0.3, -Infinity)
Infinity
> Math.pow(1, -Infinity)
NaN
```

### BigInt 🎈

`BigInt` can work with values beyond the limits of `number`. (`-2^53 - 1 → 2^53 - 1`)

You create a big int by adding `n` at the end of the number.

```jsx
> typeof 2n
'bigint'
> 2n ** 53n
9007199254740992n
> 2n ** 53n + 1n
9007199254740993n
```

`BigInt` works only with `BigInt` in arithmetic and bitwise operations. 

```jsx
> 3n + 1
Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
> 3n + 3n
6n
> 3n >> 2
Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
> 3n >> 2n
0n
```

The following arithmetic operators can be used: `+`, `*`, `-`,  `/`, `**`, and `%` .

The following bit wise operators can be used: `&`, `|`, `~`, `^`, `<<` and `>>`.

A `BigInt` is loosely equal to a `number`.

```jsx
> 3n === 3
false
> 3n == 3
true
> 3n > 3
false
> 3n > 2
true
```

It works like a `number` when it's implicitly converted to boolean: `if, ||, &&, Boolean, !`

### Boolean 🤥

The`Boolean` type has only two values: `true` or `false`.

```jsx
> typeof true
'boolean'
> typeof false
'boolean'
```

They are used and resulted in logical operations.

```jsx
> 3 > 0
true
> 2 < 1
false
> "b" > "a"
true
```

### Undefined 🤔

`Undefined` is a type that describes declared variables which have not yet been initialized with a value.

```jsx
> var x
> console.log(x)
undefined
> typeof x
'undefined'
```

### Null 📦

`Null` is a value that can be assigned to a variable to intentionally denote the absence of something.

```jsx
> var x = null;
> console.log(x)
null
```

One quirk to notice here is that the `typeof` null gives `object`. This is regarded as a mistake which dates to the first implementations of Javascript.

```jsx
> typeof null
'object'
```

### Symbol 🎨

`Symbol` is a new addition to Javascript. It's a unique, immutable and anonymus value.

```jsx
> const S = Symbol();
> console.log(S);
Symbol()
```

You can provide a debug description for the symbol.

```jsx
> const S = Symbol("a");
> console.log(S);
Symbol("a")
```

Two symbols with the same description are not equal.

```jsx
> const S1 = Symbol("a")
> const S2 = Symbol("a")
> S1 == S2
false
```

Every symbol will be unique ⇒ you can use them as keys for objects.

Symbols are not automatically converted to strings.

There is a global registry holding all the symbols. You can use `Symbol.for()` and `Symbol.keyFor()` to interact with the registry.

## Sources 📚

- [JavaScript data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
- [Javascript Interview Questions](https://www.interviewbit.com/javascript-interview-questions/)
- [ECMA 262 - The String Type](https://262.ecma-international.org/12.0/#sec-ecmascript-language-types-string-type)

## Reach Out 👋

Was this helpful for you? Let me know what you think in the comments.

You can find me on [Twitter](https://twitter.com/alexzaharia0) and  [Github](https://github.com/alexzaharia24)