Variable Types in Javascript
Primitive and non-primitive data 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:
- String
- Number
- Boolean
- Null
- Undefined
- Object
These data types are also divided into two categories:
- Primitive data types (Number, String, Boolean and Null)
- 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:
NaN
(Not-a-Number)+Infinity
(Positive infinity)-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 than 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
Thanks for reading! 🎈