With the growing need of front end web applications, there has been a need to develop those that are dynamic and more Interactive-JavaScript does that!

It was originally called Mocha (yeah, such coffee obsession, right?), then LiveScript and then JavaScript. You must be thinking why do you need to know this, right? Well, general knowledge 😛

The prefix “Java” in “JavaScript” does not imply that it is some “sub-version” of Java. Both are independent of each other-while JS is Object Oriented Programming scripting language, the other one is Object Oriented Programming language.

Having said that, let’s see what Object Oriented Programming is actually. Object Oriented Programming is a programming paradigm that focuses on objects, rather than “actions” and data rather than logic. Data is in the form of attributes and methods-which also helps in achieving modularity. JavaScript does that real smooth. It’s all about objects.

Let’s look how object oriented programming paradigm is supported in JavaScript.

Object Oriented Programming

Encapsulation

This refers to the keeping the internal functionalities of an object enclosed in it, hidden from the main application itself. JavaScript supports encapsulation.

As and when the need to create objects with the same functionality arises, the main functionality is encapsulated in a function and the function’s constructor is used to create the object. Through this, the object need not worry about what and how the function does the specific task. This is the true essence of encapsulation in JavaScript.

Classes & Objects

hj,x1000-bg,ffffff.u6

And you think you’re clever and classless and free”-John Lennon

-Just like JavaScript. Yes, JavaScript is classless, in the classical sense-it’s a prototype based language.

There is no “class” keyword in JavaScript as in C++ or Java.Also, there is no concept of explicitly declaring a constructor-the function itself is used as one.

Everything in JavaScript is an object-strings, numbers or functions. Properties of objects can be accessed by either using dot notation-object.property, or object[“property”].

Strings again can be treated as objects:

                 var x=new String(“Peter”);

           Same goes for numbers:

                 var y= new Number(10);

          Now if you do something like:

               var x=10;

               var y= new Number (10);

  Then x refers to a number, while y refers to an object.

Inheritance

This technique helps an object inherit properties from a parent object (function in JS;class in c++).

JavaScript supports only single inheritance and that too prototypal inheritance. This has indeed made things easy-an object inherits the attributes of a function and in addition to it can have it’s own attributes as well.

Consider the following:

var cars={

type:”sports”,

wheels:4

};

var ferrari=Object.create(cars); //ferrari inherits the props of car ,i.e., object inherits from another object

We can add additional property of ferrari as- ferrari.color=”red”.

Polymorphism

In layman’s language, polymorphism is the ability to create a variable, function or object that has more than one form. Moreover, this could be explained as the practice of designing objects to share behavior & override shared behavior with specific ones. In JavaScript we have the concept of child and parent object-how polymorphism is achieved through it would be clear from the following example:

Consider a parent function “Person” & child function “Teacher”, where Person is defined as follows:

function Person (name, age)

{

this.name=name;

this.age=age;

this.info=function(){

return “My name is ” + this.name + “and my age is ” + this.age

}

Next the child function Teacher can have an additional property-salary(in addition to inheriting Person’s name and age.) which is incorporated as:

function Teacher(name,age,salary)

{

this.name=name;

this.age=age;

this.salary=salary;

this.info=function(){

return “My name is”+this.name+”and my age is”+this.age+”and my salary is”+this.salary

}

Teacher.prototype=new Person();    //this creates subclass Teacher

Let’s say we have a display method that simply returns the info.Then,

display(p1)  //p1 is an object of Person

would return name and age

and,

display(t1)  //t1 is an object of Teacher that inherits from Person

would return name, age and salary.

So the method that is executed depends on the object being passed as a parameter. This is how polymorphism can be achieved.

Modularity

In software engineering, modularity refers to the extent to which a software/Web application may divided into smaller modules. Modularity helps you in organizing your code. On the other hand, it also aids in making your code maintainable and scalable by providing means for code reuse. You probably would have heard of modular kitchen-how systematic that is!

In JavaScript, as the application starts growing the lines of code in the file also increases.Here the concept of modularity comes into picture.

While aiming for modularity,two things need to be kept in mind.Firstly,breaking your code so as to group together similar functionalities so that is forms a module and secondly,establishing a relation between them.Though the modules will have dependency,but that could be handled easily by function calls(by passing variables).

A JavaScript file could be loaded using the load() function whenever the browser finds the script tag within the html tag.

e.g.-load(“example.js”);

Whenever we load multiple files,the order in which they are loaded should be kept in mind.If two files depend on one another then which one should be loaded first?-conflict arises.An example showing how to load dependent files is as follows:

 

var dependobj=

{ “First.js” : [“Second.js”],

“Third.js” : [“First.js”],

“Fourth.js” : [“First.js” , “Third.js”]

};

 

If there are some functions in one to be used in another you can resolve that dependency using Require JS. You can resolve that dependency by defining dependency of that file in the file where it is required. For example, if there is file that requires JQuery to be loaded to make the functions work then

define([

“JQuery”], function($) {

/functions/

});

That’s how modularity works in JavaScript.

Above all, from being dynamic and of course simple, JavaScript is also a very versatile language. Dealing with objects makes everything easy as you can envision them as real life objects, e.g-car: It has a color, has 4 wheels, has a type and so on. Adding additional functionalities to a child object is also possible. No need to make a typical subclass and superclass and add functionalities to both as in C++ or Java-believe in objectifying and it’ll make your life simpler! The above mentioned techniques of Object Oriented Programming make it more eloquent. Öf course, JavaScript is indeed objectified and so classless. Yet so classy in itself 😉

 

 

Leave a Reply

%d bloggers like this: