Javascript Operators

JavaScript operators are symbols that are used to perform operations on operands. There are different types of operators supported by Javascript.


Unary Operators

These types of operators take only single operand and perform operation. Following are the unary operators:-

  • Unary plus (+)  – This type of operand convert an operand into a number.
Input:-
<script>
   let x = 10;
   x = +x;
   document.writeln(x);
</script>

Output:-

Unary minus (-) – This type of operand convert an operand into a number and negate the value after that.

Input:-
<script>
   let x = 10;
   x = -x;
   document.writeln(x);
</script>

Output:-

prefix / postfix increments (++) – This type of operand add one to its operand. This increment can happen from both postfix and prefix way but there effect is different in both ways.

Input:-
<script>
   let x = 10;
   x = ++x;
   document.writeln(x);
</script>

Output:-

prefix / postfix decrements (–) – This type of operand subtract one from its operand. This decrement can happen from both postfix and prefix way but there effect is different in both ways.

Input:-
<script>
   let x = 10;
   x = x--; 
   document.writeln(x);
</script>

Output:-

It’s important to note that the prefix increment/ decrement, the value of the variable changed before the statement is evaluated.

The only difference between the postfix and prefix is that JavaScript doesn’t evaluate them until the containing statement has been evaluated.


Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the operands. Following is a example to illustrate the use of arithmetic operator addition.

Input:-
<script>
   let x = 10 + 20;
   document.writeln(x);
</script>

Output:-

In the above example, 10 and 20 are added by using + operator an evaluate to 30. In the same way we can use below operators to perform different operations.  

OperatorNameDescription
+AdditionUsed to add operands
SubtractionUsed to subtract operands
*MultiplicationUsed to multiply operands
/DivisionUsed to divide operands
%ModulusUsed to get modulus of operands

Note:- In arithmetic, the division of two integers produces a quotient and a remainder. In mathematics, the result of a modulo operation is the remainder of an arithmetic division.


Assignment Operators

An assignment operator assigns a value of the right operand to its left operand. The basic assignment operator is equal (=).

Input:-
<script>
   let x = 10;
   document.writeln(x);
</script>

Output:-

In the above example, we assigned the number 10 to the variable x. We can also add, subtract or multiply any value on variable x.

Input:-
<script>
   let x = 10;
   x += 5;
   document.writeln(x);
</script>

Output:-

In the above example, += assignment operator assigns the result of a plus 5 to variable x. The following table illustrates assignment operators that are shorthand for another operator plus the assignment:

OperatorNameDescription
a = ba = bAssigns the value of b to a.
a += ba = a + bAssigns the result of a plus b to a.
a -= ba = a – bAssigns the result of a minus b to a.
a *= ba = a * bAssigns the result of a times b to a.
a /= ba = a / bAssigns the result of a divided by b to a.
a %= ba = a % bAssigns the result of a modulo b to a.
a &=ba = a & bAssigns the result of a AND b to a.
a |=ba =a | bAssigns the result of a OR b to a.
a ^=ba = a ^ bAssigns the result of a XOR b to a.
a <<= ba = a << bAssigns the result of a shifted left by b to a.
a >>>= ba = a >>> bAssigns the result of a shifted right by b to a.

Logical Operators

These type of operators allow us to compare variables and do something based on the result of that comparison. It includes the logical NOT operator( !), the logical AND operator ( &&) and the logical OR operator ( ||).           

  • Logical NOT operator( !) – JavaScript uses an exclamation point ! to represent the logical NOT operator. The ! operator can be applied to a single value of any type, not just a Boolean value.

When we apply the ! operator to a boolean value, the ! returns true if the value is false and returns false if the value if true.

Input:-
<script>
   let eligible = false, required = true;
   document.writeln(!eligible);
   document.writeln(!required);
</script>

Output:-

Logical AND operator ( &&) – JavaScript uses the double ampersand (&&) to represent the logical AND operator. The following truth table illustrates the result of the && operator when it is applied to two Boolean values:

Aba & b
Truetruetrue
Truefalsefalse
Falsetruefalse
Falsefalsefalse

The result of the && operator is true only if both values are true, otherwise, it is false. For example:

Input:-
<script>
   let eligible = false, required = true;
   document.writeln(eligible && required); 
</script>

Output:-

  • Logical OR operator (||) – JavaScript uses the double pipe || to represent the logical OR operator. The following truth table illustrates the result of the || operator based on the value of the operands:
Aba || b
Truetruetrue
Truefalsetrue
Falsetruetrue
Falsefalsefalse

The || operator returns false if both values evaluate to false. In case either value is , the || operator returns true. For example:

Input:-
<script>
   let eligible = false, required = true;
   document.writeln(eligible || required); 
</script>

Output:-

When we use the mixed logical operators in an expression, the JavaScript engine evaluates the operators based on a specified order, and this order is called the operator precedence. In other words, the operator precedence is the order that an operator is executed.

The precedence of the logical operator is in the following order from the highest to lowest:

  • Logical NOT (!)
  • Logical AND (&&)
  • Logical OR (||)

Comparison Operators

The JavaScript comparison operator compares the two operands. The following table illustrates the JavaScript comparison operators:

OperatorDescriptionExample
==Is equal to10==20 = false
===Identical (equal and of same type)10==20 = false
!=Not equal to10!=20 = true
!==Not Identical20!==20 = false
Greater than20>10 = true
>=Greater than or equal to20>=10 = true
Less than20<10 = false
<=Less than or equal to20<=10 = false
==Is equal to10==20 = false

As we are comparing numbers in the above example, we can also compare strings. It compares the character codes numerically one by one in the string.

Input:-
<script>
    let name1 = 'alice', name2 = 'bob';    
    let result = name1 < name2;
    document.writeln(result); // true
    document.writeln(name1 == 'alice');
</script>

Output:-

We can compare object with an object, Boolean with a number, NaN with other values, number with a value of another type, object with a non-object. Following are some examples and their output in brief.

<script>
	  console.log(10 < '20'); //true
	  console.log(false < 1); // true
	  console.log(true > false); // true
	  console.log(null == undefined); // true
	  console.log(NaN != 1); // true
</script>

Bitwise Operators

The bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:

OperatorDescriptionExample
&Bitwise AND(10==20 & 20==33) = false
|Bitwise OR(10==20 | 20==33) = false
^Bitwise XOR(10==20 ^ 20==33) = false
~Bitwise NOT(~10) = -10
<< Bitwise Left Shift(10<<2) = 40
>> Bitwise Right Shift(10>>2) = 2
>>> Bitwise Right Shift with Zero(10>>>2) = 2
&Bitwise AND(10==20 & 20==33) = false
|Bitwise OR(10==20 | 20==33) = false