Ways of Creating Functions in ECMAScript 2015

Functions in ECMAScript - Part 1

ECMAScript 6

Foreword: In this part of the series, I talk about different ways of creating functions in ECMAScript.

By: Chrysanthus Date Published: 25 May 2016

Ways of Creating Functions in ECMAScript 2015

This is part 1 of my series, Functions in ECMAScript. In this part of the series, I talk about different ways of creating functions in ECMAScript.

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

Function Declaration
The following is a function declaration:

        function fn (word1, word2)
            {
             str = word1 + " who laughs " + word2 + ", laughs best.";
             return str;
            }

It has the reserved word, function and the name of the function. Try the following code:

    <script type="text/ECMAScript">

        function fn (word1, word2)
            {
             str = word1 + " who laughs " + word2 + ", laughs best.";
             return str;
            }

        stri = fn('He','last');

     alert(stri);

    </script>

Function Expressions
The following is a function expression (anonymous):

        function (word1, word2)
            {
             str = word1 + " who laughs " + word2 + ", laughs best.";
             return str;
            }

This expression (structure) can be assigned to a variable. Try the following code:

        fn = function (word1, word2)
            {
             str = word1 + " who laughs " + word2 + ", laughs best.";
             return str;
            }

        stri = fn('He','last');

     alert(stri);

The following is a function expression (anonymous) without the reserved word, function, but with parameters and the arrow punctuator:

        (word1, word2) =>
            {
             str = word1 + " who laughs " + word2 + ", laughs best.";
             return str;
            }

This expression (structure) can be assigned to a variable. Try the following code:

        fn = (word1, word2) =>
            {
             str = word1 + " who laughs " + word2 + ", laughs best.";
             return str;
            }

        stri = fn('He','last');

     alert(stri);

The Function Property of the Global Object
There is an object called the global object in ECMAScript. This object has a property, which is:

    Function(. . .)

This is a constructor and can be used to create functions. In ECMAScript a function is an object. The syntax to use this property to create an object is:

    new Function ( p1, p2, … , pn, body )

A function body (in curly braces, {}) is not really a property of a function. It is like a parameter to the function. Read and try the following code:

    <script type="text/ECMAScript">

        fn = new Function("word1",
                         "word2",
                         "str = word1 + \" who laughs \" + word2 + \", laughs best.\"; return str;");

        stri = fn('He','last');

     alert(stri);

    </script>

All the parameters in the parentheses are in quotes. The last quotation is the function body. Any quote in this body is escaped. There is no newline character in the body. The parameters are separated by commas.

You call the function returned by the constructor, in the same way as you call functions created in other ways.

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

Chrys

Broad Network

Related Articles

Ways of Creating Functions in ECMAScript 2015

Functions in ECMAScript - Part 1

ECMAScript 6

Ways of Creating Functions in ECMAScript 2015

Related Links

Comments