JavaScript Datatypes, primitive vs none primitive.

In Javascript, data type can be categories into two main types. Primitive types (value type) and none Primitive types (Reference type). each type has its own pros and cons.

Boolean

The boolean type has only two values: true and false.

var isFirstNameValid = true; // yes, first name is valid
var isLastNameValid = false; // no, last name is not valid

If you use Boolean constructor function to initialize a boolean value, then variable become object type. Javascript engine allocates more memory and resource to keep that value.

var isFirstNameValid = new Boolean(true); //isFirstNameValid become none primitive type

How do you verify this whether primitive or not, you can use typeof operator to check variable type or console.dir() to look inside.

Only other hand, we can use Boolean factory function to create primitive type as well.

var isFirstNameValid = Boolean(true); // this statement will initialize primitive variable

Please keep in mind that JavaScript treats an empty string (“”), 0, undefined and null as false

Null

The special null value does not belong to any of the types described in this page. It forms a separate type of its own which contains only the null value:

var age = null;

It’s just a special value which represents “nothing”, “empty” or “value unknown”.

Undefined

The meaning of undefined is “value is not assigned”.

var x;
console.log(x); // undefined

Technically, it is possible to assign undefined to any variable but recommend to use null as an “empty” or “unknown” value to a variable, and we use undefined for verifying if a value has been assigned to that variable or not.

Read More => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined

Number

In Javascript, only one variable type to represent Integer or floating point numbers.

var age = 25; //integer
var height = 5.9; //float

Also You can use constructor function to initialize number, But that will create none primitive type.

var age = new Number(25); // Object type
var height = new Number(5.9); // Object type

Further, you can use Number factory function

var age = Number(25); // Primitive type
var height = Number(5.9); // Primitive type

There are many operators involve with this type in order to do arithmetic operation, e.g. multiplication *, division /, addition +, subtraction -, and so on.

Also there are “special numeric values” belong to this type. Infinity, -Infinity and NaN.

console.log(1/0); //Infinity
console.log(-1/0); //-Infinity
console.log('a'/0); //NaN

Another funniest thing is, NaN is the only number not equal to itself. 😀

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

String

A string in JavaScript must be surrounded by quotes.

var str = "Hello";

There are 3 ways to define string in javascript.

Double quotes: "Hello".
Single quotes: 'Hello'.
Backticks: Hello( Comes with ES6 and allow embed variables and expressions into a string with $ sign)
console.log(`Hello, ${name}!`)

Also you can use constructor function as well as factory function similar to boolean and number.

var city = new String('Singapore'); // None primitive 
var city = String('Sri Lanka'); //Primitive

Please keep in mind, Sometime A string can be treated as character array.

Sometime, Javascript engine is smart enough to convert primitive type to object and give access to required property on it. e.s "Singapore".length this dot operator will call constructor function and read length property for us.

Symbol

The symbol type is used to create unique identifiers of objects. It comes with ES6 and Mostly use to define enum.

Object

In Javascript, all other types are considered as Object other than primitive types. Even Array and function are also an object just like holding key value pairs.

Operation on Object.

There are many ways to create an object in Javascript.

Object constructor
var user = new Object();
Object.create() function.
var user = Object.create(null);
Using Object literral
var user = { }
Using function constructor
function User(name){ this.name = name; }
var user = new User('user 1');
Es6 class keyword
class User{ constructor(name){ this.name = name; } } var user = new User();
Singleton Pattern
var user = new function(){ }

How do we access Object property. There are two ways.

Dot operator
var user = { name : 'Manoj' }
console.log(user.name);
bracket operator to access variable
var user = { name : 'Manoj' }
console.log(user['name']);

Also we can use delete keyword to delete the key/value pair from the object.

var user = {
    name : 'Manoj'
}
delete user.name; //or
delete user['name'];

Cloning Object does not really work as expected and make more confusion around the developer.

Object.assign() function can be used to clone an object. but that really helps with coping first level key/values pairs.

Also ES6 spread operator helps as same way as Object.assign does.

var user1 = {};
var user2 = { ...user1}

But JSON.stringify() comes in handy what that it allows to copy deep level.

var user2 = JSON.parse( JSON.stringify( user1 ) );

Key Points

All primitive types hold just value for variable and if we use constructor function, it will become non primitive type. But still factory function gives primitive values.

var age = 20; // Primitive var age = new Number(20); // this will create none primitive type variable var age = Number(20) ;// Primitive type
null and undefined are bit different and null is most suitable for developer to mark as variable has no value. and undefined to check variable has not been initialized.
Creating an Object has many ways and all other types other than primitive are considered as Object.
Object cloning makes more confusion in Javascript and all object are just point to same memory location in computer so that value can be overridden by another function.
Sometime, javascript engine smart enough to cover primitive to object and access property for us. e.g 'Singapore'.length //9

Javascript Data Types