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.

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:

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

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.

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.

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

Thanks for reading! 🎈

Comments

[Mohammed Samgan Khan]

nice nice nice..