TypeScript Operators

Operators are used to perform operations on program code, and they operate on one or more operand items.

Consider the following calculation:

7 + 5 = 12

In the above example, 7, 5, and 12 are operands.

The operator + is used for addition.

The operator = is used for assignment.

TypeScript primarily includes the following types of operations:

• Arithmetic operators
• Logical operators
• Relational operators
• Bitwise operators
• Assignment operators
• Ternary/conditional operators
• String operators
• Type operators

Arithmetic Operators

Assuming y=5, the table below explains the arithmetic operators:

Example

var num1:number = 10 
var num2:number = 2
var res:number = 0
    
res = num1 + num2 
console.log("Addition:        "+res); 

res = num1 - num2; 
console.log("Subtraction: "+res) 

res = num1*num2 
console.log("Multiplication:    "+res) 

res = num1/num2 
console.log("Division:   "+res)
    
res = num1%num2 
console.log("Modulus:   "+res) 

num1++ 
console.log("Increment on num1: "+num1) 

num2-- 
console.log("Decrement on num2: "+num2)

Compiling the above code with the tsc command yields the following JavaScript code:

var num1 = 10;
var num2 = 2;
var res = 0;
res = num1 + num2;
console.log("Addition:        " + res);
res = num1 - num2;
console.log("Subtraction: " + res);
res = num1 * num2;
console.log("Multiplication:    " + res);
res = num1 / num2;
console.log("Division:   " + res);
res = num1 % num2;
console.log("Modulus:   " + res);
num1++;
console.log("Increment on num1: " + num1);
num2--;
console.log("Decrement on num2: " + num2);

Executing the above JavaScript code produces the following output:

Addition:        12
Subtraction: 8
Multiplication:    20
Division:   5
Modulus:   0
Increment on num1: 11
Decrement on num2: 1

Relational Operators

Relational operators determine whether the computation results in true or false.

Given x=5, the table below explains the relational operators:

Example

var num1:number = 5;
var num2:number = 9;

console.log("Value of num1: "+num1); 
console.log("Value of num2: "+num2);

var res = num1>num2 
console.log("num1 greater than num2: "+res)

res = num1<num2 
console.log("num1 less than num2: "+res)  

res = num1>=num2 
console.log("num1 greater than or equal to num2: "+res)

res = num1<=num2
console.log("num1 less than or equal to num2: "+res)  

res = num1==num2 
console.log("num1 equal to num2: "+res)  

res = num1!=num2  
console.log("num1 not equal to num2: "+res)

Compiling the above code with the tsc command yields the following JavaScript code:

var num1 = 5;
var num2 = 9;
console.log("Value of num1: " + num1);
console.log("Value of num2: " + num2);
var res = num1 > num2;
console.log("num1 greater than num2: " + res);
res = num1 < num2;
console.log("num1 less than num2: " + res);
res = num1 >= num2;
console.log("num1 greater than or equal to num2: " + res);
res = num1 <= num2;
console.log("num1 less than or equal to num2: " + res);
res = num1 == num2;
console.log("num1 equal to num2: " + res);
res = num1 != num2;
console.log("num1 not equal to num2: " + res);

Executing the above JavaScript code produces the following output:

Value of num1: 5
Value of num2: 9
num1 greater than num2: false
num1 less than num2: true
num1 greater than or equal to num2: false
num1 less than or equal to num2: true
num1 equal to num2: false
num1 not equal to num2: true

Logical Operators

Logical operators determine the logic between variables or values.

Given x=6 and y=3, the table below explains the logical operators:

Example

var avg:number = 20; 
var percentage:number = 90; 

console.log("Value of avg: "+avg+" , value of percentage: "+percentage);

var res:boolean = ((avg>50)&&(percentage>80)); 
console.log("(avg>50)&&(percentage>80): ",res);

var res:boolean = ((avg>50)||(percentage>80)); 
console.log("(avg>50)||(percentage>80): ",res);

var res:boolean=!((avg>50)&&(percentage>80)); 
console.log("!((avg>50)&&(percentage>80)): ",res);

Compiling the above code with the tsc command yields the following JavaScript code:

var avg = 20;
var percentage = 90;
console.log("Value of avg: " + avg + " , value of percentage: " + percentage);
var res = ((avg > 50) && (percentage > 80));
console.log("(avg>50)&&(percentage>80): ", res);
var res = ((avg > 50) || (percentage > 80));
console.log("(avg>50)||(percentage>80): ", res);
var res = !((avg > 50) && (percentage > 80));
console.log("!((avg>50)&&(percentage>80)): ", res);

Executing the above JavaScript code produces the following output:

Value of avg: 20 , value of percentage: 90
(avg>50)&&(percentage>80):  false
(avg>50)||(percentage>80):  true
!((avg>50)&&(percentage>80)):  true

Short-circuit Operators (&& and ||)

The && and || operators can be used to combine expressions. The && operator returns true only if both the left and right expressions are true.

Consider the following example:

var a = 10 
var result = ( a<10 && a>5)

In this example, a < 10 and a > 5 are combined expressions using the && operator. The first expression returns false, and since && requires both expressions to be true, it does not evaluate the second expression (a > 5 is skipped) and returns false.

The || operator returns true if at least one of the expressions is true.

Consider the following example:

var a = 10 
var result = ( a>5 || a<10)

In this example, a > 5 and a < 10 are combined expressions using the || operator. The first expression returns true, and since || requires at least one expression to be true, it does not evaluate the second expression (a < 10 is skipped) and returns true.

Bitwise Operators

Bitwise operations are unary and binary operations on bit patterns or binary numerals.

Left Shift (<<): Shifts the bits of the left operand to the left by the number of positions specified by the right operand. The higher bits are discarded, and the lower bits are filled with 0. Example: x = 5 << 1 Binary: 0101 << 1 Result: 1010 (which is 10 in decimal)

Right Shift (>>): Shifts the bits of the left operand to the right by the number of positions specified by the right operand. Example: x = 5 >> 1 Binary: 0101 >> 1 Result: 0010 (which is 2 in decimal)

Unsigned Right Shift (>>>): Similar to the signed right shift, but the leftmost bits are filled with 0. Example: x = 2 >>> 1 Binary: 0010 >>> 1 Result: 0001 (which is 1 in decimal)

Example

var a: number = 2;   // Binary 10 
var b: number = 3;   // Binary 11

var result; 

result = (a & b);     
console.log("(a & b) => ", result);

result = (a | b);          
console.log("(a | b) => ", result);  

result = (a ^ b);  
console.log("(a ^ b) => ", result);

result = (~b); 
console.log("(~b) => ", result);

result = (a << b); 
console.log("(a << b) => ", result); 

result = (a >> b); 
console.log("(a >> b) => ", result);

result = (a >>> 1); 
console.log("(a >>> 1) => ", result);

Compiling the above code with the tsc command results in the following JavaScript code:

var a = 2; // Binary 10 
var b = 3; // Binary 11
var result;
result = (a & b);
console.log("(a & b) => ", result);
result = (a | b);
console.log("(a | b) => ", result);
result = (a ^ b);
console.log("(a ^ b) => ", result);
result = (~b);
console.log("(~b) => ", result);
result = (a << b);
console.log("(a << b) => ", result);
result = (a >> b);
console.log("(a >> b) => ", result);
result = (a >>> 1);
console.log("(a >>> 1) => ", result);

Executing the above JavaScript code outputs:

(a & b) =>  2
(a | b) =>  3
(a ^ b) =>  1
(~b) =>  -4
(a << b) =>  16
(a >> b) =>  0
(a >>> 1) =>  1

Assignment Operators

Assignment operators are used to assign values to variables.

Given x=10 and y=5, the following table explains the assignment operators:

Example

var a: number = 12;
var b: number = 10;

a = b;
console.log("a = b: " + a);

a += b;
console.log("a+=b: " + a);

a -= b;
console.log("a-=b: " + a);

a *= b;
console.log("a*=b: " + a);

a /= b;
console.log("a/=b: " + a);

a %= b;
console.log("a%=b: " + a);

Compiling the above code with the tsc command results in the following JavaScript code:

var a = 12;
var b = 10;
a = b;
console.log("a = b: " + a);
a += b;
console.log("a+=b: " + a);
a -= b;
console.log("a-=b: " + a);
a *= b;
console.log("a*=b: " + a);
a /= b;
console.log("a/=b: " + a);
a %= b;
console.log("a%=b: " + a);

Executing the above JavaScript code outputs:

a = b: 10
a+=b: 20
a-=b: 10
a*=b: 100
a/=b: 10
a%=b: 0

Ternary Operator (?)

The ternary operator has 3 operands and evaluates a boolean expression. It primarily determines which value should be assigned to the variable.

Test ? expr1 : expr2

• Test: The condition statement
• expr1: Returned if the condition Test returns true
• expr2: Returned if the condition Test returns false

Let's look at the following example:

var num: number = -2;
var result = num > 0 ? "Greater than 0" : "Less than 0, or equal to 0";
console.log(result);

This example checks if the variable is greater than 0.

Compiling the above code with the tsc command results in the following JavaScript code:

var num = -2;
var result = num > 0 ? "Greater than 0" : "Less than 0, or equal to 0";
console.log(result);

Executing the above JavaScript code outputs:

Less than 0, or equal to 0

Type Operators

typeof Operator

The typeof operator is a unary operator that returns the data type of the operand.

Example:

var num = 12;
console.log(typeof num);   // Output: number

Compiling the above code with the tsc command results in the following JavaScript code:

var num = 12;
console.log(typeof num); // Output: number

Executing the above JavaScript code outputs:

number

instanceof

The instanceof operator is used to check if an object is of a specified type. This will be introduced in later chapters.

Miscellaneous Operators

Negation Operator (-)

Changes the sign of the operand. Example:

var x: number = 4;
var y = -x;
console.log("x value is: ", x);   // Output: 4 
console.log("y value is: ", y);   // Output: -4

Compiling the above code with the tsc command results in the following JavaScript code:

var x = 4;
var y = -x;
console.log("x value is: ", x); // Output: 4 
console.log("y value is: ", y); // Output: -4

Executing the above JavaScript code outputs:

x value is:  4
y value is:  -4

String Operator: Concatenation Operator (+)

The + operator concatenates two strings. Example:

var msg: string = "tutorialpro" + ".COM";
console.log(msg);

Compiling the above code with the tsc command results in the following JavaScript code:

var msg = "tutorialpro" + ".COM";
console.log(msg);

Executing the above JavaScript code outputs:

tutorialpro.org