ARTICLE

# Precedence and Associativity of Logical Operators in TypeScript

Posted by | November 22, 2012
In this article I am going to explain Precedence and Associativity of Logical Operators in TypeScript.
Reader Level:

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 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 a 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)  // Associativity
{
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 tells 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 operators program.

LogicalPrecedenceAndAssociativity
.ts

 class LogicalPrecedenceAndAssociativity {     MyFunction() {         var mark = 60;         if (mark > 60 || mark <= 75 && mark != 100) { // Precedence             document.write("Precedence result = True
");              }             if (mark > 60 && mark <= 75 && mark != 100) { // Associativity                 document.write("Associativity result =True");             }         else {             document.write("Associativity result = False");         }     } } window.onload = () =>{     var data = new LogicalPrecedenceAndAssociativity();     data.MyFunction();}

default.html

           TypeScript HTML App

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
");         }         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

comments
COMMENT USING
PREMIUM SPONSORS
Nevron Software is a global leader in component based data visualization technology for a diverse range of Microsoft centric platforms. Nevron Data Visualization components are used by many companies, educational and government organizations around the world.
Tags
SPONSORED BY
• .NET Diagramming framework designed for creating advanced solutions