Simplify JavaScript Object Oriented Programming Model: Part 2

Introduction

The previous article introduced how to write readable code using the JavaScript OOP model. I highly recommend you read the previous article Simplify JavaScript Object Oriented Programming Model: Part 1 before this one since this article highly depends on the first. This article introduces objects and methods in JavaScript.

Object in JavaScript

In JavaScript everything is an object except primitive data types. A variable contains a value and that value can vary. Whereas an object contains many values and the values will be in a name/value pair. An object can have properties and methods. An object method is also an object property containing a function definition.

You can declare a JavaScript variable as in the following way that shows a variable can have only one value.

var student = "Alice";

We can create JavaScript object in one of the following three ways:

• Object Literal
• New Operator
• Object Constructor

So let's see each one by one.

Object Literal

We can create n JavaScript object literal, in this way we both define and create the object in one statement as shown in the following code snippet. It's an easiest way to create an object.

var student = {
                name: "Sandeep",
                city: "jaipur",
                show: function ()
    {
                    return this.name +" "+ this.city;
                }
            }

The student object has properties and methods as shown in the preceding example. Both name and city are properties whereas show is a method because it contains a function definition for it. Here this is an object itself, in other words this is used in the method then its value is the object itself.

Now I wonder that you have understood how to declare a variable and object in JavaScript so it's time to access properties and methods of an object. You can access the student object property in one of the following two ways:

1. The first one is using the dot operator (.), for example:
   console.log(student.name);
2. Another way is using the property name as the index such as:
   console.log(student["city"]);

Moreover you can access an object method using the dot (.) operator as shown for the student object's show() method in the following code snippet.

console.log(student.show());

New Operator

We can create a JavaScript object using the new operator. It creates a new object. The type of this object, is simply Object. The following code snippet shows how to create a student object with its properties and methods. Both properties and methods are accessed in the same way as in the previous one.

var student = new Object();
            student.name = "Alice";
            student.age = 18;
            student.getDetail = function ()
            {
                return this.name + " " + this.age;
            }

Both are ways to create a JavaScript object and only create a single object, in other words you can't create many objects of one type. Both approaches are nearly the same but the first approach (object literal) is better than approach two (the new operator) because the object literal method has high execution speed and readability.

Object Constructor

Since both of the preceding approaches create only a single object of the type, we often need more than one object of a type and that's why we used the third approach (object constructor). In this approach, we define the object definition once to meet each specific instance's need and use it multiple times. An object constructor is merely a regular JavaScript function but it's called via a new operator.

Let's use “student” as an example. It has two properties and one method. One property is the name whereas another is age and the method name is getDetail(). The important thing to realize is that every student will have a different name, color and detail as well. To create an object type that accommodates this need for flexibility, we will use an object constructor.

function student(name, age)
          {
                this.name = name;
                this.age = age;
                this.getDetail = function ()
                {
                    return this.name + " " + this.age;
                }
          }

Here the function student (name and age) is an object constructor and its properties and method are declared inside it by prefixing them with the “this” keyword. The this keyword in an object constructor does not have a value. It is only a substitute for the new object. The value of this will become the new object when the constructor is used to create an object.

Objects defined using an object constructor will be instantiated using the new keyword. Actually the object constructor creates a blueprint for the objects, not the object itself. So you can create multiple objects of one type as shown in the following code snippet. Here we create two objects of the “student” type and both have different information.

var student1 = new student("Alice", 22);
console.log(student1.getDetail());//"Alice 22"
var student2 = new student("Jon", 20);
console.log(student2.getDetail()); // "Jon 20"

You can also add methods to an object using the prototype that the object creates by object constructor. A prototype is a type of inheritance in JavaScript. We use it when we would like an object to inherit a method after it has been defined, in other words we are attaching a method to an object after it's been defined. This method will be shared among all object instances. Let's extend the “student” type and add a new method that changes the student name after it's instantiated.

function student(name, age)
           {
                this.name = name;
                this.age = age;
                this.getDetail = function ()
                {
                    return this.name + " " + this.age;
                }
            }
            student.prototype.changeName = function (name)
            {
                this.name = name;
            }

            var student1 = new student("Alice", 22);
            console.log(student1.getDetail());//"Alice 22"
            student1.changeName("Mark");
            console.log(student1.getDetail());//"Mark 22"

The keyword prototype is always used after the object name. The prototype method is called the same as other methods using the dot operator. As in the preceding example, the student name has been changed after the object was instantiated.

 

You can also define all the prototype methods in one container as shown in the following example.

function student(name, age)
            {
                this.name = name;
                this.age = age;

            }
            student.prototype =
         {
                changeName: function (name)
                {
                    this.name = name;
                },
                getDetail: function ()
               {
                    return this.name + " " + this.age;
                }
            }

            var student1 = new student("Alice", 22);
            console.log(student1.getDetail());//"Alice 22"
            student1.changeName("Mark");
            console.log(student1.getDetail());//"Mark 22"

We again create a student type using the object constructor that has two the properties name and age. We defined its method using the prototype. We create an object prototype globally and defined inside it. Both changeName and getDetail are methods for the student object. We define the function definition for a method using a colon (:) as shown in the preceding example.