Ways to Create Custom Objects in ECMAScript 2015

Custom Objects in ECMAScript – Part 1

ECMAScript 6

Foreword: In this part of the series I explain what custom objects are and ways to create them in ECMAScript.

By: Chrysanthus Date Published: 18 May 2016

Introduction

This is part 1 of my series, Custom Objects in ECMAScript. In this part of the series I explain what custom objects are and ways to create them in ECMAScript.

Pre-Knowledge
At the bottom of this page, you will find links to the different series you should have read before coming here to better understand this one.

Variables and Functions Working Together
It is possible to have a set of variables and functions that work together as in the following code:

        num1 = 3;
        num2 = 4;

        function add()
         {
                sum = num1 + num2;
                return sum;
         }

In this code, there are two variable, num1 and num2 and each variable is assigned a value. There is one function, which adds the values of the two variables and returns the sum. As you can see, the variables and the function work together; they are not independent of one another. .

Object and Class
An object is a set of variables and functions that work together and are coded in a special way. In an object the variables are assigned values. A class is code for variables and functions that work together, but the variables are not assigned any values.

The above code can be considered as an object. If you remove the values of 3 and 4, allowing the variables (names), then the resulting code could be considered as a class. By giving different values to the variables in different places in a long program, you end up with different objects, of the same class. The objects are different from one another by their values and not by their variable names or functions. The class code (set of variables and functions) is single and does not have values for the variables.

An object is an instance of the class. The class is seen as a generalized code.

Creating Objects using Object()
ECMAScript installation comes with a fundamental (built-in) object called, Object. You can use Object to create other objects. Such objects created do not have a class. The above code would be created as an object as follows:

        obj = new Object();

        obj.num1 = 3;
        obj.num2 = 4;
        obj.add = function ()
            {
                sum = this.num1 + this.num2;
                return sum;
            }

The first line creates the object without any variables or functions. It uses the new operator. The name of the object is obj . The variables are then added using the dot notation.

Any variable or function for an object is called a property (in ECMAScript). So, you have the property, obj.num1, to which is assigned the value, 3. You have the property obj.num2 to which is assigned the value, 4. You have the property obj.add, to which is assigned a function. The function here is an anonymous function. The name of the first property is num1; the name of the second property is num2; and the name of the third property is add, without parentheses.

Variable properties are called, data properties. Function properties are called methods.

Read and try the following code, which calls the method:

    <script type="text/ECMAScript">

        obj = new Object();

        obj.num1 = 3;
        obj.num2 = 4;
        obj.add = function ()
            {
                sum = this.num1 + this.num2;
                return sum;
            }

        answer = obj.add();

        alert(answer);

    </script>

To call the method (function), you use parentheses. The display (answer) of the above code is 7.

Note: in the method, “this” refers to the object, which has the method.

You can omit the data properties, and just pass the data values as arguments to the method. The following code illustrates this:

    <script type="text/ECMAScript">

        obj = new Object();

        obj.add = function (no1, no2)
            {
                sum = no1 + no2;
                return sum;
            }

        answer = obj.add(5, 6);

        alert(answer);

    </script>

Note that the method has been completely redefined.

The method does not necessarily have to be anonymous. You can define the method (function) separately and then just assign only the method’s name to the object. The following code illustrates this:

    <script type="text/ECMAScript">

        function fn(no1, no2)
            {
                sum = no1 + no2;
                return sum;
            }

        obj = new Object();

        obj.add = fn;
        answer = obj.add(7, 8);

        alert(answer);

    </script>

Creating Objects by Constructor
The standard way to create objects in ECMAScript is to use a function called a constructor and an object called a prototype. In ECMAScript, a function is an object, so the constructor is also an object. So, the standard way to create objects in ECMAScript is to use a constructor object and a prototype object.

You create the prototype as the above object is created. The constructor is a function that may have an empty body. Any object has a default property called the prototype. The value of the prototype may be null. In the case of a constructor, the value is not null. It is an object that is defined.

The following code illustrates how to create one of the above objects using a constructor function and a prototype object:

    <script type="text/ECMAScript">

        function ConstfFn()
            {

            }

        proto = new Object();

        proto.num1 = 3;
        proto.num2 = 4;
        proto.add = function ()
            {
                sum = this.num1 + this.num2;
                return sum;
            }

        ConstfFn.prototype = proto;

        obj = new ConstfFn();

        answer = obj.add();

        alert(answer);

    </script>

Note that the constructor has an empty body. The prototype object, proto, has all the data properties (with assigned values) and the methods required by the object to be created. Note that in assigning the prototype object to the contractor function (object), the reserved word, prototype, is used as the property of the constructor, and no parentheses are used for the constructor.

To create the object, you just call the constructor, with the new operator. Read and try the above code, if you have not already done so.

You can have the constructor and the prototype in one block (body of constructor function). The following code illustrates this:

        function ConstfFn()
         {
                this.num1 = 3;
                this.num2 = 4;
                this.add = function ()
                 {
                        sum = this.num1 + this.num2;
                        return sum;
                 }
         }

        obj = new ConstfFn();

        answer = obj.add();

        alert(answer);

In the constructor function body, “this” refers to the prototype. You create the object, in the same way as the above.

Objects by Literal Notation
Another way to create an object is to use the literal notation for object. The syntax is:

    objectName = {prop1:value1, prop2:value2, prop3:value3, . . .};

The above object is created by literal notation, as in the following code (read and try it):

    <script type="text/ECMAScript">

        obj = {
                 num1 : 3,
                 num2 : 4,
                 add : function ()
                     {
                         sum = this.num1 + this.num2;
                         return sum;
                     }
             };

        answer = obj.add();

        alert(answer);

    </script>

In this case, you do not need the constructor, to create the object. The object is already created in the literal notation. You just go ahead and use the object.

Object from Classes
I discuss this topic in the next part of the series.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Ways to Create Custom Objects in ECMAScript 2015

Custom Objects in ECMAScript – Part 1

ECMAScript 6

Introduction

Related Links

Comments