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