Voice of a Developer: Part Eight - JavaScript OOP

Sumit Jolly
8y
4.9k
0
3

Article

JavaScript is language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles of the series:

We use OOPS in programming languages like C++, C#, Java. It is fundamental of our programming patterns.

Q: Is JavaScript an object oriented language?

Ans: Yes it is, but many developers differ because there is no “class” keyword in it. I believe JavaScript has all the ingredients to be an OOP language. We can read in detail OOP in JavaScript

Encapsulation

Encapsulate means “enclose (something) in or as if in a capsule”. It refers enclosing all the functionalities within that object, so it is hidden from rest of the application. There are many ways to create Objects (refer http://www.c-sharpcorner.com/article/voice-of-a-developer-javascript-objects/ Voice of a Developer – part 2 for details)

Below is the ubiquitous object literal pattern, my favorite way to declare objects:

var myObj = {name: "Sumit", profession: "Developer", getDetails: function(n, p){
return n+' ' +p;
}
};

Inheritance

Javascript supports prototypal inheritance than classical inheritance. We studied this in part2; let us dig it in detail further. There are two concepts:

Prototype property:

Every Javascript function has a prototype property and you attach properties and methods on this prototype property when you want to implement inheritance. Firefox and most versions of Safari and Chrome have a __proto__ “pseudo” which we have learnt in part2. There is another property called prototype property for inheritance.

Example:

function baseFunction(){};
var func1 = new baseFunction();
baseFunction.myOwnProperty = 'my own emunerable property';
baseFunction.prototype.testInheritanceProperty = 'other instances can inherit it';
var func2 = new baseFunction();
var func3 = new baseFunction();
console.log(func1.myOwnProperty);
console.log(func2.testInheritanceProperty); // other instances can inherit it
console.log(func3.testInheritanceProperty); // other instances can inherit it

Prototype attribute:

JS runtime first look property on the object. If not found, then looks for the property on the object’s prototype—the object it inherited its properties from. This is called as prototype chaining. JavaScript uses this prototype chain to look for properties and methods of an object.

Object.prototype.newProperty=100;
var obj = {} // creates a new Object
obj.newProperty; // 100

As I mentioned above there is hidden property __proto__ as a connector.

This describes connection of prototype chaining from obj->Object->property you’re trying to access.

Q: Why we get undefined while accessing a property?

Ans: Now I believe you know the answer, i.e., if a property does not exist in object or parent or onwards then JS runtime returns undefined

Note: Properties Inherited by all Objects

If you notice when you create a new Object it’ll inherit properties & method from Object.prototype ex- toString(), toLocaleString()

Abstraction

It means to hide certain details and show required objects. This improves readability and maintainability of code. For a good code quality and to reduce risk of an object getting modified outside accidentally, it is good to adopt abstraction.

Q: Is there a support in Javascript on Abstraction?

Ans: There is no support or feature developed in Javascript, but we can look for alternatives.

Let us see an example of abstraction:

var Logger = {
log : function(log){}
} //Logger object which has a constructor function
var ConsoleLogger = function() {}; //It is a blank function
ConsoleLogger.prototype = Object.create(Logger);
ConsoleLogger.prototype.log = function(log) {
console.dir (log);
}

Output
output

Summary

OOP is there in JavaScript, it is up to us how we leverage it. Please share your feedback and comments.