Precedence and Associativity of Assignment Operators in TypeScript

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 difference precedence, the one with the highest precedence is always applied first. If I talk about the 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 associativity.

 

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 show 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: