Javascript Objects - The Essence

Everything in javascript except primitive types - numbers, string, bool, null and undefined, is object.
An object in Javascript can be created in following ways:
//1
var employee = {}

//2
function Employee() {}
var employee = new Employee();

//3
var employee = Object.create(null);

The dynamic nature

Consider the below object
var employee = {name: "john", address: "gurgaon"};
console.log(employee); /* logs
[object Object] {
  address: "gurgaon",
  name: "john"
}
*/
If I try adding another property "department" and log the resulting object again.
employee.department = "finance";
console.log(employee); /* logs
[object Object] {
  address: "gurgaon",
  department: "finance",
  name: "john"
}
*/
Similarly we can delete properties at runtime
delete department.location

The concept of public and private properties

Lets consider a different representation of "department"
var department = function(f, l) {
    var firstName = f;
    var lastName = l;
    this.name = firstName + ' ' + lastName;
};

var dept = new department('john', 'savvy');
In the above code "department" can be seen as a class for "dept" object (although there is no concept of class in javascript). It's called the "function object"
Also notice that the code looks very similar to constructor in C# or any other object oriented language. The properties "firstName" and "lastName" are privide and hence not exposed to public whereas "name" is public.

Prototypes

Every object in JavaScript is associated with a prototype object from which it inherits it's properties
Object created using Object literal is linked to Object.prototype, and similarly those created using “String” literal is linked to String.prototype and so on…
We can also choose prototype that an object should be linked to
var employee = Object.create(null);
employee.address = "noida";

var iTEmployee = Object.create(employee);
iTEmployee.firstName = "rob";
iTEmployee.lastName = "smith";

console.log(Object.getPrototypeOf(iTEmployee)); /* logs
[object Object] {
  address: "noida"
}
*/
How Object.create works?? See the below code
if(typeof Object.create !== 'function') {
  Object.create = function(o) {
    var F = function() {}
    F.prototype = o;
    return new F();
  }
}
*/
If you notice internally it uses the object passed as parameter to assign a prototype of a new function and thereby returns the object of this new function. This way the object passed as the argument is set as the prototype of the resulting object.
Prototype linkage has effect on only retrieval of properties and not on updates. See below examples
//Update
var employee = Object.create(null);
employee.address = "noida";

var iTEmployee = Object.create(employee);
iTEmployee.firstName = "rob";
iTEmployee.lastName = "smith";

console.log(Object.getPrototypeOf(iTEmployee)); /* logs
[object Object] {
  address: "noida"
}
*/

//Retrieval
console.log(iTEmployee.hasOwnProperty("address")); //false
console.log(employee.hasOwnProperty("address")); //true

Comments

Popular Posts