Variable Types in Javascript

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.

We have the following 6 different data types available in JavaScript:

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

These data types are also divided into two categories:

1. Primitive data types (number, string, boolean and null)
2. Non-primitive data types (object)

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

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:

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.

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:

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 that either hold true or false.

4. Null

It is the most confusing data type of Javascript.

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

You can check if a value is null or not like this:

if (value === null) {
  // ....
}

Or you can also use double equals but that is slightly different from the strict equal operator:

if (value == null) { // This is equal to (value === null || value == undefined)
  // ...
}

Here is a gotcha with null values:

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

The type of null is an object. That’s a bit strange but this is how it was designed. null is a primitive data type but due to a bug in earlier javascript versions, it shows the typeof as object. So it’s a design mistake that was acknowledged by the Javascript creator Brendan Eich himself.

Then why not fix this?

One of the core principles of Javascript is to never break backward compatibility. So, unfortunately, this bug can not be fixed for the reason that it would break everyone’s code everywhere.

5. Undefined

This is another unusual and strange data type in JavaScript. If you declare a variable that means 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. If you compare it with null then you get something like these:

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

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

In most cases, we can use null and undefined interchangeably unless we are dealing with typeof or arithmetic operators.

null behaves like 0 if we do arithmetic operations on it:

2 + null; // 2
null + 2; // 2

2 - null; // 2
null - 2; // -2

2 * null ;// 0
null * 2; // 0

2 ** null; // 1
null ** 2; // 0

null / 2; // 0
2 / null; // Infinity

But undefined works differently in arithmetic operations and would give you NaN:

2 + undefined; // NaN
2 * undefined; // NaN
2 - undefined; // NaN
2 ** undefined; // NaN
2 / undefined; // NaN

Another difference is with JSON data format as it only supports null and would omit out undefined like this:

JSON.stringify({ a: undefined, b: null}); // {"b":null}

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.

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

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

That is all for now. Thanks for reading! 🎈