Voice of a Developer: Part Eight

Introduction

JavaScript is the 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 to our programming patterns.

Q: Is JavaScript an object-oriented language?

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 to enclosing all the functionalities within that object, so it is hidden from the 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 learned 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 the connection of prototype chaining from obj->Object->property you’re trying to access.

Q: Why we get undefined while accessing a property?

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 the 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?

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

Summary

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

Read more articles on JavaScript