Variable Types in Javascript
Tags: devcommunity, thetechnicalwritingbootcamp, javascript
Published: 2020-10-04 21:00:09

This article specifically talks about the variable types in Javascript. The reason I dedicated an entire post for this is, that, there are a lot of tricky interview questions that come out of this. There are many gotchas included. So this deserves its own separate article.

There are mainly 6 types of data types available in JavaScript:

1. String
2. Number
3. Boolean
4. Null
5. Undefined
6. Object

Although, these data types are also divided into two categories:

1. Primitive data types
2. Non-primitive data types

You will see the gotchas and examples of some of these in this post. Although a separate article would be required for Object data types as it holds a lot of things worth of explanation

## 1. String

It can possibly hold any value. It's one of the primitive data types. Primitive data types cannot be mutated.

For example, we can access each character in a string like this:

```js
let name = 'pankaj';
console.log(name[0]); // 'p'
console.log(name[1]); // 'a'
console.log(name[2]); // 'n'
```

But we cannot re-assign the values in primitive data types like this:

```js
let name = 'pankaj';
name[0] = 't';

console.log(name[0]); // 'p'
console.log(name); // 'pankaj'
```

So primitive data types are immutable and cannot be modified like this.


## 2. Number

According to the ECMAScript standard, the Number holds a double-precision 64-bit binary format IEEE 754 value.

The number data type can hold all possible numerical values including the following:
1. `NaN` (Not-a-Number)
2. `+Infinity` (Positive infinity)
3. `-Infinity` (Negative infinity)

The above three are special kinds of data that can be stored in Number data types.

#### NaN (Not-a-Number)

It is a special value that's returned by Javascript when parsing of a number is failed for some reason.

It doesn't equal to itself.

```js
console.log(NaN === NaN); // false
console.log(NaN == NaN); // false
```

We can verify if a value is `NaN` or not by using `isNaN()` function.

But be careful while using the `isNaN()` function because it first tries to convert the value that you pass to it into a number through type conversion and, as a result, some values convert into numbers while others don't.

For example:

```js
console.log(isNaN(NaN)); // true
console.log(isNaN(undefined)); // true
console.log(isNaN({})); // true
console.log(isNaN(null)); // false
console.log(isNaN(true)); // false
console.log(isNaN(false)); // false
console.log(isNaN('')); // false
console.log(isNaN('     ')); // false
console.log(isNaN('90')); // false
console.log(isNaN("Ant Man")); // true
```

## 3. Boolean

This is one of the most simple data types which either holds `true` or `false`.

## 4. Null

`null` is used when you want to declare a variable and intentionally express the absence of a value (unlike `undefined` where the value is simply absent).

Here is a gotcha with `null` values:

```js
console.log(typeof null); // 'object'
```

The type of `null` is an `object`. 😂 I know this is strange but this is how it was designed and we have to live with it.

## 5. Undefined

This is another unusual and strange thing about JavaScript. If you declared a variable then it means that it exists but it's still considered `undefined` unless you put a value into it. So basically it represents the state of a variable that's been declared but without a value assigned to it.

The type of `undefined` is `undefined`.

```js
console.log(typeof undefined); // 'undefined'
```

# 6. Object

An object is a collection of properties. The properties can be any of the previously mentioned types, as well as other objects and functions.

It's a non-primitive data type and stores the values by reference. This is a very tricky part of the Objects.

```js
console.log({} === {}) // false
```

Objects are created by reference so two `{}` will always have two different references so they are never equal. This is another gotcha that you must watch out for.


### Comparison between different data types:

Here are some quick and interesting comparisons

```js
console.log(null === undefined); // false
console.log(null == undefined); // true

console.log(null === null); // true
console.log(null == null); // true

console.log(!null); // true
console.log(null); // null
console.log(!!null); // false

console.log(1 + null); // 1
console.log(1 + undefined); // NaN
```

Thanks for reading! 🎈