Precedence and Associativity of Arithmetic Operators in TypeScript

In this article I am going to explain how to work precedence and associativity in arithmetic operators.

Arithmetic Operators Precedence and Associativity in TypeScript

 

Precedence

 
If we talk about the precedence of the Arithmetic operators, then you will see that primary operators are the highest precedence and then unary operators have precedence and the last are binary operators with the lowest precedence.
 

Associativity
 

If we talk about the precedence of the multiplication and division operators then you will find, these operators contain the same precedence. Now let's see an example.
 
(a) 50/5*2 = 20.
(b) 50/5*2 = 5.
Then, what is the correct result?
 
How can TypeScript determine which operator is applied first? The answer to this question is Associativity. An operator can either have left-right or right-left associativity. When any binary operators with the same precedence is applied with the same operand, then left-right associativity is applied. And if any unary and primary operator with the same precedence is applied with the same operand, then right-left associativity will be applied.
 
The given table tells you which operator has higher precedence and how to associativity on them. In this table, precedence is given in decreasing order in other words precedence category one (1) has the highest priority.
 
Precedence Category   Symbol   Name Associativity
1 Primary  (<Numeric_expression>)
 
++(Postfix)
 
 --(Postfix) 
Parenthesis
 
Increment operator
 
Decrement operator 
Right-Left
 
Right-Left
 
Right-Left
2 Unary +
 
-
 
--(Prefix)
 
++(Prefix)
Unary  plus
 
Unary  minus
 
Decrement operator
 
Increment operator
Right-Left
 
Right-Left
 
Right-Left
 
Right-Left
3
 
Binary
 
 
*
 
/
 
%
Multiplication
 
Division
 
Modulus
Left-Right
 
Left-Right
 
Left-Right
4 Binary +
 
-
Addition
 
Subtraction
Left-Right
 
Left-Right
 
Do the following steps to create a program using Precedence and Associativity in Arithmetic Operators.
 
Step 1
 
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". After that, a window is opened, enter the name of your application like "ArithmeticPrecedenceNAssociativity", then click on the Ok button.
 
Step 2
After Step 1 your project has been created. 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 Arithmetic Operators Precedence and Associativity program:
 

ArithmeticPrecedenceNAssociativity.ts

  1. class ArithmeticPrecedenceNAssociativity {  
  2.  Myfunction() {  
  3.   var PreRes: number = 100 + 5 * 10;  
  4.   document.write("Precedence res=" + PreRes + "<br/>");  
  5.   var AssoRes: number = 100 / 5 * 2;  
  6.   document.write("Associativity res=" + AssoRes);  
  7.  }  
  8. }  
  9. window.onload = () => {  
  10.  var call = new ArithmeticPrecedenceNAssociativity();  
  11.  call.Myfunction();  
  12. }  
Note: In the above-declared program, multiplication operation is performed first, because the multiplication operator has greater precedence than the addition operator. And in the associativity part, two operators (such as (/) and (*)) with the same precedence as the same operand, left-to-right associativity will cause the left-most operator to be applied first, in other words, the divide operation is performed first and then the multiplication operation is performed.
 

default.html

  1. < !DOCTYPEhtml >  
  2.  <  
  3.  htmllang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  metacharset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript HTML App < /title>  
  11.  <  
  12.  linkrel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  scriptsrc = "app.js" > < /script>  
  17.  <  
  18.  /head>  
  19.  <  
  20.  body >  
  21.  <  
  22.  divid = "content" / >  
  23.  <  
  24.  /body>  
  25.  <  
  26.  /html>  

app.js

  1. var ArithmeticPrecedenceNAssociativity = (function() {  
  2.  function ArithmeticPrecedenceNAssociativity() {}  
  3.  ArithmeticPrecedenceNAssociativity.prototype.Myfunction = function() {  
  4.   var PreRes = 100 + 5 * 10;  
  5.   document.write("Precedence res=" + PreRes + "<br/>");  
  6.   var AssoRes = 100 / 5 * 2;  
  7.   document.write("Associativity res=" + AssoRes);  
  8.  };  
  9.  return ArithmeticPrecedenceNAssociativity;  
  10. })();  
  11. window.onload = function() {  
  12.  var call = new ArithmeticPrecedenceNAssociativity();  
  13.  call.Myfunction();  
  14. };  
Step 4
 
Output
 
precendence-associativity-in-typescript.jpg