Post
Ask Question

Voice of a Developer: Part Eight - JavaScript OOP

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:
  1. var myObj = {  
  2.     name: "Sumit",  
  3.     profession: "Developer",  
  4.     getDetails: function(n, p) {  
  5.         return n + ' ' + p;  
  6.     }  
  7. }; 

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
  1. function baseFunction() {};  
  2. var func1 = new baseFunction();  
  3. baseFunction.myOwnProperty = 'my own emunerable property';  
  4. baseFunction.prototype.testInheritanceProperty = 'other instances can inherit it';  
  5. var func2 = new baseFunction();  
  6. var func3 = new baseFunction();  
  7. console.log(func1.myOwnProperty);  
  8. console.log(func2.testInheritanceProperty); // other instances can inherit it    
  9. 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.
  1. Object.prototype.newProperty = 100;  
  2. var obj = {} // creates a new Object    
  3. obj.newProperty; // 100 
As I mentioned above there is hidden property __proto__ as a connector.
 
property
 
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
  1. var Logger = {  
  2.         log: function(log) {}  
  3.     } //Logger object which has a constructor function    
  4. var ConsoleLogger = function() {}; //It is a blank function    
  5. ConsoleLogger.prototype = Object.create(Logger);  
  6. ConsoleLogger.prototype.log = function(log) {  
  7.     console.dir(log);  
  8. } 
Output
 
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


Similar Articles