What is Javascript?

 

Javascript is not considered as an object-oriented language. Most people call it scripting language and consider it as less programming language. But, JavaScript is very popular in the market right now. Many tools, the framework has been designed over the javascript like Angular Js, ionic js. There are few popular libraries like React.js etc.

 

Javascript is untyped language. You do not see the datatypes, classes (ECMA6 does have but those are again constructor functions only). As we have studied over the years that any programming language that follows Object Oriented Properties are the better if we consider the performance, reusability.
So, does the JavaScript. It has some OOP. It does not necessarily follow same architecture as Java/C# follows but it has its own way. So let’s dive into it one by one.

 

  • Object
  • Prototypical Inheritance

 

Object / Constructor:

 

We will start with the application. We have to implement Employee Management System. Where Employee can have designation, salary, experience, qualification.

Let’s define a constructor function called as an employee.

 

 var Employee = function(designation, salary, qualification){
	
 this.designation = designation;
    this.salary = salary;
    this. Qualification = qualification;
}

We are done with the Constructor definition let’s create an object out of it.

 

 var hr = new Employee(‘Human Resource Manager”, 50000, “MBA”);

 var softwareDeveloper = new Employee(“Software Developer”, 50000, “BE/BTech”);

 hr;

 softwareDeveloper;


Let’s run above piece of code in console and see the output.

 

  1. Hr Object looks like this,

 

Screen Shot 2017-04-28 at 1.50.33 AM

 

  1. softwareDeveloper object look like this,

 

Screen Shot 2017-04-28 at 1.52.25 AM

 

Now, if you look at the output we can see our properties which we have set but

along with that, there are different other properties as well.

 

Let us discuss in details about each property that hr object have,

 

  1. Qualification: String literal that we have defined.

 

  1. Designation: String literal that we have defined.

 

  1. Salary: Number literal that we have defined.

Employee Prototype: This is Prototypically inherited  Object of the constructor from which we have created an instance

 

hr ( var hr = new Employee(‘Human Resource Manager”, 50000, “MBA”); )

 

If you open Employee object to see details then you can see,

Screen Shot 2017-04-29 at 1.04.41 AM

 

  1.   Constructor definition of Employee.
  2.   Object Prototype:  Every object that is created in javascript does have this Object     

          the prototype which inherited the Object constructor.

Inside object prototype, you can see many methods. Before discussing them let us discuss how the object has been defined in Javascript and what properties and behaviour it does have.

 

More About the Object:

According to MDN (Mozilla developer Network), object is

JavaScript is designed on a simple object-based paradigm. An object is a collection of

properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.

 

Properties of the Object:

 

  1. Object.length
  2. Object.prototype

 

Methods of the Object: credit to MDN

  • Object.assign()

             Copies the values of all enumerable own properties from one or more source object to a  target object.

 

  • Object.create()

             Creates a new object with the specified prototype object and properties.

 

  • Object.defineProperty()

           Adds the named property described by a given descriptor to an object.

 

  • Object.defineProperties()

            Adds the named properties described by the given descriptors to an object.

 

  • Object.entries()

              Returns an array of a given object’s own enumerable property [key, value] pairs.

 

  • Object.freeze()

            Freezes an object: other code can’t delete or change any properties.

 

  • Object.getOwnPropertyDescriptor()

            Returns a property descriptor for a named property on an object.

 

  • Object.getOwnPropertyDescriptors()

            Returns an object containing all own property descriptors for an object.

 

  • Object.getOwnPropertyNames()

              Returns an array containing the names of all of the given object’s own enumerable and non-enumerable properties.

 

  • Object.getOwnPropertySymbols()

            Returns an array of all symbol properties found directly upon a given object.

 

  • Object.getPrototypeOf()

             Returns the prototype of the specified object.

 

  • Object.is()

               Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).

 

  • Object.isExtensible()

              Determines if extending of an object is allowed.

 

  • Object.isFrozen()

              Determines if an object was frozen.

 

  • Object.isSealed()

              Determines if an object is sealed.

 

  • Object.keys()

               Returns an array containing the names of all of the given object’s own enumerable properties.

 

  • Object.preventExtensions()

               Prevents any extensions of an object.

 

  • Object.seal()

                Prevents other code from deleting properties of an object.

 

  • Object.setPrototypeOf()

               Sets the prototype (i.e., the internal [[Prototype]] property)

 

  • Object.values()

              Returns an array of a given object’s own enumerable values.

 

If we go back to our example and check object prototype then we could see only a few methods there? If the object was inherited then why all methods have not populated there?

Here is some interesting twist. To reveal the suspense we need to understand how inheritance works in javascript.

 

Inheritance:

We all know javascript can prototypically inherit the property of the parent constructor from which instance has been created. Prototypically means the instance which we have created has the link of the parent object and that parent Object have a link to his parent and this link is up to the object constructor.

Let’s try to run previous hr object.

Screen Shot 2017-05-19 at 12.38.24 AM

 

As we know we have not defined the toString() method, still, it is not called from somewhere and it gave us the output.
This is the question need to be answered but before that let’s modify Employee constructor and see what happens.

 

var Employee = function(designation, salary, qualification){
	
this.designation = designation;
 this.salary = salary;
 this. Qualification = qualification;
	this.toString = function(){
		console.log("I am from Employee toString Method");
	}
}

 

Now console the hr.toString() and see the output.

O/P

 

Screen Shot 2017-04-29 at 2.02.14 AM

 

Perfect, This makes sense. But in previous case, we have not defined the toString() method but still, it got invoked from somewhere. the reason?

 

The reason behind this is prototypical inheritance. If you have read about the methods of the Object then you can find toString() there. And that is why it got called.
Now as freeze() method is also there let’s call it and see the output.

 

Screen Shot 2017-04-29 at 2.05.51 AM

 

What a strange behavior that is? Although this method is there in the object. We can not call this. Why?

 

Reason: I agree this method is there in object constructor but it is not added in prototype property (one of 2 properties of the object). And that is not inherited by the child instances.

 

Why is prototypical inheritance needed?

 

  1. Without Prototypical Inheritance
	   var Employee =  function(firstname, lastname){
	  	 this.firstname = firstname;
 this.lastname = lastname;
this.getFullName = function(){
		 return this.firstname + “ ” + this.lastname;  
	}	
  }
	
	  var employee1 = new Employee(“Akash”, “Bhandwalkar”);
	  var employee2 = new Employee(“Suresh”,”Varman”);

 

Screen Shot 2017-04-29 at 2.14.49 AM

 

Lets call the getFullName and see the output.

 

Screen Shot 2017-04-29 at 2.18.32 AM

 

     2. Scenario 2

 

 var Employee =  function(firstname, lastname){
	  	 this.firstname = firstname;
 this.lastname = lastname;
 }

Employee.prototype.getFullName  = function(){
		 return this.firstname + “ ” + this.lastname;  
}	

var employee1 = new Employee(“Akash”, “Bhandwalkar”);
var employee2 = new Employee(“Suresh”,”Varman”);

 

Console both the objects.

 

Screen Shot 2017-04-29 at 2.17.36 AM

 

As we can see we do not have getFullName() method there. Let us try to call and see the output.

 

Screen Shot 2017-04-29 at 2.20.23 AM

 

If you see the output in both the cases is same. Then why to take the headache of writing prototype.getFullname?

 

Now carefully see the output of employee1 in both cases. Then you will realize that if we do not use prototype then the copy of getFullName is created in all the instance created from the Constructor.
Observe the difference below. Prototype vs without a prototype. We have saved from copying same data.

 

Screen Shot 2017-04-29 at 2.14.49 AM    Screen Shot 2017-04-29 at 2.17.36 AM

 

 

CONCLUSION:

The object-oriented approach in JavaScript makes sure you avoid repetitive code as well as it avoids different copies of same things multiple times.

Looking for AngularJS Development Company, Hire our dedicated developers.!

  1. Prototype itself is a very important and interesting concept in javascript as we know every function has its own prototype and we can add as many methods through prototype and the main advantage is it makes the function object very lightweight.
    Example:
    function xyz(){}
    xyz.prototype.print = function(){
    //some code here
    return “something”;
    }
    xyz.prototype.draw = function(){
    //some code here
    return “something”;
    }

    var xyzObj = new xyz();
    xyzObj.draw();
    xyzObj.print();

    So here we can clearly see that our function object is very lightweight and we can add methods through prototype so it good for the performance of the application as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.