Learn JavaScript the OOP Way

JavaScript has for long been a popular programming language for the web. JavaScript is a dynamic, weakly-typed scripting language that provides support for many of the OOP features. JavaScript is a great language for writing object oriented Web applications — it provides support for inheritance via prototyping, properties and functions as well. You can also implement the other OOP concepts like encapsulation, polymorphism, etc. This article discusses how we can master JavaScript the OOP way, with code examples wherever applicable.

Object oriented programming has been in use for a long time now. There are many languages that support OOP. Such languages include, but are not limited to, C++, Java, C#, Simula, SmallTalk, etc. Before we delve deep into how we can use JavaScript the OOP way, let’s have a quick tour of the basic concepts related to OOP.

OOP is a programming paradigm that provides many features like, extensibility, easier maintainability and code reuse. It became popular primarily because it eliminated the flaws of the then popular programming paradigm called Structured Programming or Procedural Programming. Some of the popular OOP concepts include Encapsulation, Inheritance, Polymorphism, Abstraction, Composition, Association, Aggregation, etc.

Working with Objects in JavaScript

The basic idea of OOP is that it helps to model real-world things using objects. Objects can contain data or code or both and can also contain other objects. Note that unlike other OOP languages, you don’t have a class keyword in JavaScript to create classes. Instead, you would rather need to take advantage of constructor functions to create objects effectively and attach data and functions to them as and when needed. Most importantly, in JavaScript, methods and objects are defined using the function keyword. Here’s an example that illustrates what we just discussed.

function add (x, y) 
{
  this.total = x+y;
}

You can now invoke the function add using the following statement.

var result = new add(10, 20); //This is an object instantiation call

Similar to other OOP languages, you can have fields to store data in JavaScript as well. In the example above, x, y and total are fields. Note that these fields are public by default, for example you can change their values when needed. So, the following statements are valid.

var result = new sum(100, 200);
result.total = 150; 

Objects can also have their own methods — such methods may be writing the definition of the object or outside it. Let’s understand this with an example.

function createPerson(name) {
  var obj = {};
  obj.name = name;
  obj.showMessage = function() {
    alert(name);
  };
  return obj;
}

The above code snippet illustrates how you can define a function within the scope of the object definition. The following example shows how you can define the function outside of the scope of the object definition.

function sum(x, y) 
{
  this.total = add(x,y);
  this.display = display;
}
function display(total) 
{
   alert(total);
}

Let’s take a look at another example — one that you might be using frequently in your application when you are working with JavaScript. The following JavaScript code snippet illustrates a function named createProduct.

function createProduct(name) {
  var obj = {};
  obj.name = name;
  obj.showMessage = function() {
    alert('The product name is ' + this.name + '.');
  };
  return obj;
}

You can now take advantage of the createProduct function to create a new product as shown in the code snippet given below.

var product = createProduct('Sample product');
product.showMessage();

Summary

In this article we have had a discussion on what JavaScript is, what OOP is and how we can program OOP using JavaScript with code examples wherever appropriate. I would discuss more on OOP JavaScript in my future articles here. Happy reading!