Left-Hand-Side Expressions in ECMAScript 2015

Expressions in ECMAScript – Part 2

ECMAScript 6

Foreword: In this part of the series, I talk about left hand side expressions in ECMASript.

By: Chrysanthus Date Published: 13 May 2016

Introduction

This is part 2 of my series, Expressions in ECMAScript. In this part of the series, I talk about left hand side expressions in ECMASript. You should have read the previous part of the series before coming here, as this is a continuation.

Property Assessors

An object in ECMAScript consists of properties. If a property is assigned a literal, then the property is called a data property. If a property is a function then the property is called a method. There are two syntaxes for accessing a property, which are:

        MemberExpression . IdentifierName

and

        MemberExpression [“ Expression” ]

So you can use the dot notation or the bracket notation to access the properties of an object. The complete line in each syntax here, is an expression. The bracket notation takes in an expression as a string (note the quotes) within the square brackets; this “argument” expression can be a single identifier or identifiers having operators or a number.

The dot Notation
The following code that works, shows how the dot notation has been used to access a data property and a method:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <script type="text/ECMAScript">

        obj = new Object();

        obj.num1 = 5;
        obj.num2 = 8;
        obj.add = function ()
                            {
                                answer = this.num1 + this.num2;
                                return answer;
                            }

        alert(obj.num1);

     result = obj.add();
     alert(result);

    </script>

</body>
</html>

The extra HTML code is to produce a web page.
The object has two data properties that hold numbers. The object has a method that adds the two numbers. All over the code, the dot notation has been used, even inside the first alert function argument. If the property is a method, then parentheses have to be used. Arguments for the method if any, go inside the parentheses.

An array is an object where the identifiers (names) for the data properties are numbers (integers). However, you do not use the numbers with the dot notation.

The Bracket Notation
The following code is the same as the previous one, except that the dots have been removed and the identifiers have been placed in, within square brackets:

    <script type="text/ECMAScript">

        obj = new Object();

        obj["num1"] = 5;
        obj["num2"] = 8;
        obj["add"] = function ()
                            {
                                answer = this.num1 + this.num2;
                                return answer;
                            }

        alert(obj["nu"+"m1"]);

     result = obj["add"]();
     alert(result);

    </script>

For the first alert statement in the code, the identifier string has been made by concatenating two strings: "num1" is the same as "nu"+"m1". If the property is a function, you place the parentheses with any arguments, next to the square brackets as shown in the code.

With arrays, it is the index that goes into the square brackets. The index can be with or without quotes (string). The following code illustrates this:

    <script type="text/ECMAScript">

        empArr = new Array("John", "Mary", "Peter", "Augustine");

        alert(empArr["2"]);

        alert(empArr[3]);

    </script>

The new Operator
The new operator is the word, new. It is used to create objects. The syntax to use the operator is:

    new NewExpression

So after the new operator, you have the new-expression. An example creating an object is:

        obj = new Object();

where obj is the name (identifier) you give to the object you create. Object() is the constructor of the global object. You can then go on to add properties to the object as follows:

        obj["num1"] = 5;
        obj["num2"] = 8;

Remember, in ECMAScript, a method is still a property.

Both the new operator and the expression typed after it, form a bigger expression.

Function Call
A function call is a calling (call) expression. The syntax is:

    functionName(arguments)

If the function is a method of an object, the syntax is:

    objectName.FunctionName(arguments)

Consider the following example:

    <script type="text/ECMAScript">

        function fn(param1, param2)
            {
                item1 = param1;
                item2 = param2;
                return item1 + item2;  //string concatenation
            }

        ret = fn("book", " pencil");

        alert(ret);

    </script>

In the code the function call is:

    fn("book", " pencil");

No object was created in the code.

Argument List
An argument list is a list of arguments that form a grouping expression; that is, it is a list of arguments, separated by commas, in parentheses. This is typically found within a function call.

As soon as the function called (definition) starts executing, an array belonging to the function, takes the arguments as its elements. The name of the array is, arguments. Read and try the following code:

    <script type="text/ECMAScript">

        function fn(param1, param2)
            {
                alert(arguments[0]);
                alert(arguments[1]);

                return param1 + param2;  //string concatenation
            }

        ret = fn("book", " pencil");

        alert(ret);

    </script>

There are two arguments here, and so the arguments array has the following elements.

        arguments[0]
        arguments[1]

In a normal definition of a function, you do not need the arguments array. However, with the arguments array you can define a function without parameters, since you would get the arguments from the arguments array (list). The following code illustrates this:

    <script type="text/ECMAScript">

        function fn()
            {
                str = arguments[0] + arguments[1];  //string concatenation
                alert(str);
            }

        ret = fn("book", " pencil");

    </script>

You can try the code.

There are three other left hand side expressions that I will talk about later.

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

Chrys

Broad Network

Related Articles

Left-Hand-Side Expressions in ECMAScript 2015

Expressions in ECMAScript – Part 2

ECMAScript 6

Introduction

Related Links

Comments