There are mainly two types of variables in JavaScript: Primitive types and Reference types. JavaScript tracks these variables for a particular scope in a variable object. Primitive types are directly stored inside the variable object, while for reference types, the pointers of these reference types' values are stored in the variable object.
/* in primitive types, values get copied when
assigned to other variables */
var character1 = "spiderman";
var character2 = character1;
character1 = "venom"
console.log(character1); // venom
console.log(character2); // spiderman
/* in reference types, only pointer values
get copied when assigned to other variables */
var character1 = { name : "spiderman" };
var character2 = character1;
character1.name = "venom"
console.log(character1.name); // venom
console.log(character2.name); // venom
Primitive Types
There are 5 primitive types in JavaScript.
| Type | How to initialize | console.log(typeof a) |
| number | var a = 1; | "number" |
| boolean | var a = true; | "boolean" |
| string | var a = "hello world"; | "string" |
| null | var a = null; | "object" |
| undefined | var a; | "undefined" |
Number, boolean, string types are relatively straight forward if you have had some prior programming experience. As for a value is undefined when we have not initialized a variable with a value or when there is no return statement in a function, it returns undefined. The value null represents the intentional absence of any object value. Null is used mainly to deference an object.
The typeof operator is mainly used to identify the type of a primitive type. In the above table there is an anomaly for the null type strictly due to legacy reason. Therefore the best way to identify if a value is null by
var a = null;
console.log(a === "null"); // true
Reference Types
Values of these reference types are known as object. These are also synonymous with Classes from other programming languages. Objects are just key, value pairs in JavaScript, these values can be primitive values or other objects. Other than primitive types, everything is an object in JavaScript. There are two ways to initializing variables (actual and literal). Actual form of initializing an object is using the new keyword. Literal form of initializing is the same way of initializing an object but in a simpler syntax.
| Type | How to Initialize | Initializing using Literal Form |
| Array | var a = new Array(1, 2, 3); | var a = [1, 2, 3] |
| Date | var a = new Date(); | N/A |
| Error | var a = new Error("some error occurred"); | N/A |
| Function | var a = new Function("console.log('hello');"); | var a = function () { console.log("hello"); } |
| Object | var a = new Object(); | var a = {} |
| RegExp | var a = new RegExp("\d+"); | var a = /\d+/g |
We can access properties using dot operator or the square bracket operator. The square bracket operator is useful when accessing a property dynamically. We can dereference an object using the null value, this way we directly free up the memory for that variable.
var character = { name: "venom" };
character = null; // free the memory
// accessing a method
character = { name: "venom" };
console.log(character.name); // "venom"
var keyName = "name";
console.log(character[keyName]; // "venom"
More in depth with types
You must have also seen methods on primitive types. This is one of the weird yet, powerful feature of JavaScript. JavaScript converts these primitive values to reference values/ object behind the scenes and then again deference/ destroy these reference values. This is done to provide a similar programming experience like working with objects.
var character = "SPIDERMAN";
var lowercased = character.toLowerCase();
console.log(lowercased); // "spiderman"
// what javascript does behind the scenes
var character = "SPIDERMAN";
var temp = new String(character);
var lowercased = temp.toLowerCase();
temp = null;
console.log(lowercased); // "spiderman"
We can also use these primitive wrapper type in our code to create reference types of the primitive types manually, but it's a good practice to avoid using these primitive wrappers whenever we can
var character = new String("spiderman");
var hp = new Number(100);
var winner = new Boolean(false);
console.log(typeof character); // "object"
console.log(typeof hp); // "object"
console.log(typeof winner); // "object"