Precedence and Associativity of Logical Operators in TypeScript

Logical Operators Precedence and Associativity in TypeScript

Operators in TypeScript have rules of Precedence and Associativity that determine how expressions are evaluated. Here I describe Precedence and Associativity separately.

Precedence

If I talk about the Precedence of logical operators then you have seen that when an expression mixes && and || then that evaluation must be done in the correct order. In an expression, the operator with the highest precedence is grouped with an operand first, then the next highest operator will be grouped with this operands, and that process continues, as shown in the following table, showing which has the highest precedence and which the lowest, and how to associativity works, when several logical operators have the same precedence.

Precedence	Operator	Associativity
High	! (Not)	Left-Right
Medium	&& (and)	Left-Right
Low	\|\| (OR)	Left-Right

For example: If we write this code:

if (mark > 60 || mark <= 75 && mark != 100) // Precedence
{
document.write("True");
}

Then the result is true because the above example is evaluated in this way:
(a) mark <= 75 && mark != 100, this expression is evaluated first, due to the && (logical and operator). The (&&) and operator has higher precedence then || (Logical OR operator), and it gives the result True.

(b) After step (a) above, the remaining part, if (mark > 60 || True) or say (False || True) is evaluated, and finally, it also gives True as the result.

Associativity

If in any expression contains several logical operators of the same precedence then how to solve that expression? The answer of this question is Associativity, and logical 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 left to right associativity will cause the left-most operator to be applied first.

For example: If we write this code:

if (mark > 60 && mark <= 75 && mark != 100) {
document.write("True");
} else {
document.write("False");
}

Then the result is false because the above example is evaluated in this way:
(a) mark > 60 && mark <= 75, this expression is evaluated first, due to the && (logical and operator), The ( &&) and operator has the same precedence, and I explained above that if any operators with two or more operators (such as (&&) and (&&)) with the same precedence is applied to the same operand then the left to right associativity will cause the left-most operator to be applied first. Hence it gives False for the result.

(b) After step (a) above, the remaining part, if (False && mark != 100 ) or say (False || True) is evaluated, and finally, it also gives False as the result.

The following examples tell you, how to use Precedence and Associativity in TypeScript. Use the following procedure to create a program using logical operators.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is subsequently opened, provide the name of your application like "LogicalPrecedenceAndAssociativity," 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 of the Logical operator's program.

LogicalPrecedenceAndAssociativity.ts

class LogicalPrecedenceAndAssociativity {
MyFunction() {
var mark = 60;
if (mark > 60 || mark <= 75 && mark != 100) {
document.write("Precedence result = True </br>");
}
if (mark > 60 && mark <= 75 && mark != 100) {
document.write("Associativity result =True");
} else {
document.write("Associativity result = False");
}
}
}
window.onload = () => {
var data = new LogicalPrecedenceAndAssociativity();
data.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 LogicalPrecedenceAndAssociativity = (function() {
function LogicalPrecedenceAndAssociativity() {}
LogicalPrecedenceAndAssociativity.prototype.MyFunction = function() {
var mark = 60;
if (mark > 60 || mark <= 75 && mark != 100) {
document.write("Precedence result = True </br>");
}
if (mark > 60 && mark <= 75 && mark != 100) {
document.write("Associativity result =True");
} else {
document.write("Associativity result = False");
}
};
return LogicalPrecedenceAndAssociativity;
})();
window.onload = function() {
var data = new LogicalPrecedenceAndAssociativity();
data.MyFunction();
};

Step 4

Output