Function as an Object in ECMAScript 2015

Functions in ECMAScript - Part 3

ECMAScript 6

Foreword: In this part of the series, I present the ECMAScript function as an object.

By: Chrysanthus Date Published: 25 May 2016

Introduction

This is part 3 of my series, Functions in ECMAScript. In this part of the series, I present the ECMAScript function as an object. In ECMAScript, data properties and methods are simply called, properties. Like any other object in ECMAScript, properties can be added to a function. The body of a function definition is not really a property to the function. It is like a parameter to the function. You should try all the code samples in this tutorial.

Adding Properties to a Function Declaration
You can have a function declaration and then add properties to the function name using a dot and the name of a property. The following code illustrates this with two numbers as data properties, and one function as method:

        function ConstrFn()
         {

         }

        ConstrFn.num1 = 3;
        ConstrFn.num2 = 4;

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

        alert(ConstrFn.num1);
        alert(ConstrFn.num2);
        alert(ConstrFn.add());

You should try the code. Note that parentheses for the function are not used while adding a property.

“this” refers to the function. A function is an object.

Coding Properties within the Function Declaration
To code properties within the function, you will have to use “this”, which refers to the function. The following code illustrates this with the above properties:

        function ConstrFn()
         {
                this.num1 = 3;
                this.num2 = 4;

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

        obj = new ConstrFn();
        answer = obj.add();
        alert(answer);

In this case, you create an object for the function before using it. A function is like a constructor.

Calling Function and Method
You can call a function and its method in one expression. In this case, the function body should return “this”. The following code illustrates this:

        function ConstrFn()
         {
                this.num1 = 3;
                this.num2 = 4;

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

        answer = ConstrFn().add();
        alert(answer);

Each of the function parentheses can have arguments.

Function Expression
The following code samples are a repeat of all the above, where the main function has been replaced by a function expression:

        ConstrFn = function ()
         {

         }

        ConstrFn.num1 = 3;
        ConstrFn.num2 = 4;

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

        alert(ConstrFn.num1);
        alert(ConstrFn.num2);
        alert(ConstrFn.add());

        ConstrFn = function ()
         {
                this.num1 = 3;
                this.num2 = 4;

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

        obj = new ConstrFn();
        answer = obj.add();
        alert(answer);

        ConstrFn = function ()
         {
                this.num1 = 3;
                this.num2 = 4;

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

        answer = ConstrFn().add();
        alert(answer);

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

Chrys

Broad Network

Related Articles

Function as an Object in ECMAScript 2015

Functions in ECMAScript - Part 3

ECMAScript 6

Introduction

Related Links

Comments