Miscellaneous Operators in ECMAScript

ECMAScript Operators – Part 7

ECMAScript 6

Foreword: In this part of the series, I talk about operators that do not really fall into any category in ECMAScript.

By: Chrysanthus Date Published: 13 May 2016

Introduction

This is part 7 of my series, ECMAScript Operators. In this part of the series, I talk about operators that do not really fall into any category in ECMAScript. If you are new to programming, then you should have read the previous part of the series before reaching here.

The Grouping and the Comma Operator
The grouping operator is the pair of parentheses, that is, (. . .) .It groups items together. You have seen this in functions where it groups parameters or arguments together. It is also used in other expressions like in forming the list of elements for an array during construction.

The comma operator is the comma, that is ‘,’. It separates items within a grouping operator.

The Conditional Operator
The conditional operator is, “? :”. Consider the following program:

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

    <script type="text/ECMAScript">

        $a = 5;
        $b = 10;
        var $bigger;

        if ($a > $b)
            {
                $bigger = $a;
            }
        else
            {
                $bigger = $b;
            }

        document.write($bigger);

    </script>

</body>
</html>

The extra HTML code is just to produce a web page at the browser. The code of interest begins with the initialization of $a, then $b. After that you have the declaration of $bigger. The aim of the program is to find the bigger of the two numbers between, $a and $b. The identifier, $bigger holds the bigger number.

The if-condition is ($a > $b). It checks if $a is bigger than $b. If it is, then the value of $a is assigned to $bigger as the if-block is executed. If it is not, then the value of $b is assigned to $bigger as the else-block is executed. Note, either the if-block or the else block is executed; both blocks cannot be executed. So, the identifier, $bigger ultimately holds the bigger number. The else-block will also be executed if the two values are the same.

The last statement of interest displays the value of $bigger. Note that the if-block has only one statement, and the else-block also has only one statement.

Note: the condition, ($a > $b) is an expression and can be considered as an operand. The statement “$bigger = $a” and the statement “$bigger = $b;” can each be considered as an operand. So, there are three operands in the if-construct. Also remember that either block above has just one operand.

The above if-construct, in that situation can be replaced with:

    $bigger = $a > $b ? $a : $b;

The operator in this statement is "?:". The $a is placed in-between “?” and “:”. Even though “?” and “:” are separated by $a, they form one operator, "?:". Now, consider just the expression,

    $a > $b ? $a : $b;

This expression is the same as the statement above except for the preceding,. “$bigger =”. In this expression, “$a > $b” in front of ? is an operand; $a in-between “?” and “:” is also an operand; $b after “:” is an operand, as well. This expression is interpreted as follows:
In any such expression, if the operand (e.g. “$a > $b”) before the ? is true, the operand (e.g. $a) before the : is returned, otherwise the operand (e.g. $b) after the “:” is returned. There are three operands involved: one in front of “?”, another in front of “:” and the last behind “:”.“$a > $b” is the if-condition; $a is the single operand of the contracted if-block; and $b is the single operand of the contracted else-block. So, “:” can be interpreted as “else” in the expression. The whole expression is a special contracted “if-then-else” construct.

The return value of the expression has to be held in an identifier. And so you have the statement:

    $bigger = $a > $b ? $a : $b;

where $bigger holds the returned value. Of course, each of the three identifiers, $bigger, $a and $b can have a different name.

Read and try the following program that illustrates the use of the expression:

    <script type="text/ECMAScript">

        $a = 5;
        $b = 10;
        var $bigger;

        $bigger = $a > $b ? $a : $b;

        document.write($bigger);

    </script>

The new Operator
The new operator is the word, new. It is used to create new objects as in:

        myObj = new Object();

The array is also an object. So the new operator is used to create an array object as in:

        arr = new Array()

The Question of Operator Precedence in ECMAScript
It is possible to have a statement with many operators. The question is, which operator is evaluated first? Some operators will always be evaluated first before others. In fact there are different levels of this, and that is operator precedence.

Consider the following statement:

        x = 2 + 5 * 3;

There are three operators here, which are =, + and *. Now = is of a very low precedence and it is evaluated last. The question then is between + and - ; which is evaluated first? If the multiplication operator, * is evaluated first, the answer will be 17. If the addition operator is evaluated first, the answer will be 21. Well, in ECMAScript, * is of a higher precedence than +, so * is evaluated first and the answer is 17. You can force the + to be evaluated first by using brackets, as follows:

        x = (2 + 8) * 5;

Whenever you are in doubts of which operator would be evaluated first, use brackets, to be sure that an operator is evaluated first. Brackets can be nested.

That is it, for this part of the series.

Chrys

Broad Network

Related Articles

Miscellaneous Operators in ECMAScript

ECMAScript Operators – Part 7

ECMAScript 6

Introduction

Related Links

Comments