Reader Level:
ARTICLE

Precedence and Associativity of Assignment Operators in TypeScript

Posted by Sharad Gupta Articles | TypeScript November 26, 2012
In this article I am going to explain how Precedence and Associativity of Assignment Operators works in TypeScript.
  • 0
  • 0
  • 2084

Assignment Operators Precedence and Associativity in TypeScript

The Assignment operator is the most common operator used in nearly all programming languages. Operators in TypeScript have rules of Precedence and Associativity that determine how expressions are evaluated. Here I describe Precedence and Associativity separately.


Precedence


Precedence rules determine which operators should be applied first. For operators with a difference precedence, the one with the highest precedence is always applied first. If I talk about Precedence of the Assignment operator, then all Assignment operators have the same precedence, then which one is applied first?


Associativity

If in any expression contains several Assignment operators of the same Precedence, then how to solve that expression? The answer of this question is Associativity, and Assignment operators, which have the same precedence in a single expression or say when two or more operators (such as (=) and (%=)) with the same precedence can be applied to the same operand, the right to left Associativity will cause the right-most operator to be applied first. All Assignment operators with the same precedence are given below in a table with associativitry.

Precedence Operator Associativity
Equal =     +=     -=     *=     /=     %=     &=     <<=     >>= Right-Left

For example, if we write this code:

var a, b=5,c=4,d=3,e=2,val;

a = b += c *= d %= val = e;

Then the result is that a is 9, because the above example is evaluated that way.

(a)
Associativity causes Assignment operators to be evaluated from right to left, so val=e will be evaluated and the result will be 2, in other words val=2.

(b)
After Step a, the remaining part, d%=val or d=3%2 will be evaluated and the result will be 1, in other words d=1.

(c)
After Step b, the remaining part, c*=d or c=4%1 will be evaluated and the result will be 1, in other words c=4.

(d)
After Step c, the remaining part, b+=c or b=5+4 will be evaluated and the result will be 1, in other words b=9.

(e)
And finally a=b will be evaluated and the result will be 9, in other words a=9.

The following examples shows how to do Precedence and Associativity of Assignment operators in TypeScript. Use the following to create a program using Assignment operators.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of  your application like "AssignmentOperators", then click on the Ok button.

Step 2

After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, css file and html files.

Step 3

The code for the Assignment operators program:


AssignmentOperators
.ts

class AssignmentOperators {

    MyFunction() {

        var a,b=5,c=4,d=3,e=2,val;

        a = b += c *= d %= val=e;

        document.write("value of a="+ a+ " value of b= "+b+"</br> value of c="+c+" value of d="+d+"</br>value of val="+val);

    }

 }

window.onload = () =>{

    var call = new AssignmentOperators();

    call.MyFunction();

}


default.html

 

<!DOCTYPEhtml>

 

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <divid="content"/>

</body>
</
html>


app.js

 

var AssignmentOperators = (function () {

    function AssignmentOperators() { }

    AssignmentOperators.prototype.MyFunction = function () {

        var a;

        var b = 5;

        var c = 4;

        var d = 3;

        var e = 2;

        var val;

 

        a = b += c *= d %= val = e;

        document.write("value of a=" + a + " value of b= " + b + "</br> value of c=" + c + " value of d=" + d + "</br>value of val=" + val);

    };

    return AssignmentOperators;

})();

window.onload = function () {

    var call = new AssignmentOperators();

    call.MyFunction();
};
 


Step 4
 

The output will look like:

assignment-operators-in-type-script.jpg

COMMENT USING