In this section of the tutorial, we will discuss JavaScript Operators and its uses which is important to perform mathematical and logical operations with the values assigned in a variable and compute a result.
Now, let’s understand the definition of Operators in JavaScript.
What is an Operator in JavaScript?
In JavaScript, we can influence the flow of code’s execution based on whether a condition is true or false using the decision-making statements.
In order to use these decision-making statements, we must first get familiar with the operators that are bundled with the statements which perform decision-making tasks.
In this tutorial, we will discuss few important and mainly used operators in JavaScript such as Assignment Operators, Comparison Operators, Logical Operators, Bitwise Operators, Bitwise Shift Operators, and other miscellaneous operators.
Assignment Operators
In JavaScript, whenever we want to assign a value to a variable or property, we a special type of operator, i.e. = operator which is known as Assignment Operator.
Example:
- Here, variable a and variable b are assigned with values 10 and 20 respectively.
- We can clearly notice that for assigning the value to the variable, we have used the assignment operator = in the above code.
- The assignment operator expects its left-side operand to be an lvalue: a variable or object property.
- And on the right-side operand, there should be an arbitrary value of any type.
Similarly, we have another useful operator that we will discuss next, i.e. Comparison Operator.
Comparison Operators
In JavaScript, a comparison operator is used to compare or evaluate two values. Just like we perform comparison in the real world, we use comparison operators in a similar way in JavaScript.
Comparison operators are used in comparing two values in the left operand and the right operand.
We can use less than operator with the symbol <, which is a comparison operator symbol. Similarly, we can use greater than operator with the symbol >, which is again a comparison operator symbol.
10<20 [TRUE]
40>20 [TRUE]
Example:
Below is a table that lists other commonly used Comparison Operators in JavaScript.
Operator Type |
Usage |
Equal |
x == y |
Not equal |
x != y |
Greater than |
x > y |
Greater than or Equal to |
x >= y |
Less than |
x < y |
Less than or Equal to |
x <= y |
Strictly equal |
x === y |
Not strictly equal |
x !== y |
Comparison Operators and Assignment Operators
We must keep a very important point in our mind that Comparison Operators are different from Assignment Operators, and they must never be considered the same while coding in JavaScript.
Example: Assignment Operator(=) is used to assign a value to a variable but Comparison Operator(==) is used to compare both the value present in those variables.
Now, we will discuss another very useful operator in JavaScript, i.e. Logical Operators.
Logical Operators
In JavaScript, we mostly encounter situations where we have to review whether an expression is true or false. In such scenarios, we use Logical Operators.
The Logical Operators performs Boolean algebra and they are mostly used in conjunction with the relational operators which combine two expressions into one more complex expression.
There are types of Logical Operators used in JavaScript, such as:
Logical AND(&&)
The AND && operator works in three different ways.
When used with Boolean Operands, && returns true if and only if its first and second operands are true. If one or both operands are false, it returns false.
Example:
a == 0 && b == 0
- When used with Boolean Operands, && returns a truthy value is both the operands are truthy. If one or both value is false, && return falsy values.
- When we don’t understand the return values of && operator, && first evaluates the first operand, if it is false, the value of the whole expression is false and it returns a falsy value without even evaluating the second operand. If the value in the first operand comes truthy, then the second operand is evaluated, based on that a falsy or a truthy value is returned by the && operator.
Logical OR(||)
The Logical OR || operator performs Boolean Operation on two operands in the expression.
If one or both operands is found to be truthy, then the Logical OR || operator returns a truthy value. If both the operands are falsy, then || operator returns a falsy value.
Example:
var a || b; var a || b || c;
- The Logical OR || operator first evaluates its first operand, if the value is found to be truthy, it short-circuits and returns the truthy value without even evaluating the second operand.
- If the first operand is found to be falsy, then it evaluates the second operand and returns the value of the expression.
Logical NOT(!)
The Logical NOT ! operator is a unary operator and it is placed before a single operand. It is used to invert the boolean value of its operand.
!(a && b) === (!p || !q) q !(a || b) === (!p && !q) q
- If the value of the operand is found to be truthy, then the Logical ! operator inverts the value and evaluates it as a falsy value.
- Likewise, if the value of the operand is false, it inverts the value and evaluates it as true.
Other JavaScript Operators
Similarly, JavaScript has many other useful operators that are often used in coding such as Arithmetic Operators, Bitwise Operators, Bitwise Shift Operators, Object Operators, Conditional Operators, Comma Operators, typeof Operators, and void Operators.
Below are some tables that list the different JavaScript operators and their use.
Arithmetic Operators
Operator Type |
Usage |
Addition |
x + y |
Subtraction |
x – y |
Multiplication |
x * y |
Division |
x / y |
Modulus |
x % y |
Prefix increment |
++x |
Postfix increment |
x++ |
Prefix decrement |
-x |
Postfix decrement |
x- |
Bitwise Operators
Operator Type |
Usage |
Bitwise AND |
x & y |
Bitwise OR |
x | y |
Bitwise XOR |
x ^ y |
Bitwise NOT |
x ~ y |
Bitwise Shift Operators
Operator Type |
Usage |
Left-shift |
x << y |
Sign-propagating |
x >> y |
Zero-fill right-shift |
x >>> y |
Object Operators
Operator Type |
Usage |
delete |
Deletes an object |
in |
Returns true if an object has the named property |
instanceof |
Returns true if an object is of a type, |
new |
Creates new object |
this |
Refers to current object |
Conditional Operators
Operator Type |
Usage |
Conditional Operator |
Evaluates whether a condition is true or not |
Comma Operators
Operator Type |
Usage |
Comma Operator |
Evaluates both the operands treating them as one expression |
typeof Operators
Operator Type |
Usage |
typeof Operator |
Returns a string of type of an object or variable |
void Operators
Operator Type |
Usage |
void operator |
Evaluates but doesn’t return a value |
Operator Precedence
In JavaScript, Operator Precedence controls the order of operations performed. Operators having higher precedence are performed before the Operators having the lower precedence.
Example:
result = a + b*c; result = (a + b)*c;
- In the above example, JavaScript will perform an operation to evaluate the value of the result obeying the order of operator precedence.
- First, multiplication operator * having higher precedence than addition operator + will multiply the variables b and c, then the value generated will be added to the variable a.
- But line 2 of the code, the property access and invocation becomes the higher precedence than any other operator in the list. So first the addition operation will be performed and then the multiplication will be performed.
Below is a table listing the order of operator precedence from highest to lowest.
Operator Type |
Operators |
Member |
. or [ ] |
Create instance |
new |
Function call |
( ) |
Increment |
++ |
Decrement |
— |
Logical NOT |
! |
Bitwise NOT |
~ |
Unary + |
+ |
Unary – |
– |
Typeof |
typeof |
Void |
void |
Delete |
delete |
Multiplication |
* |
Division |
/ |
Modulus |
% |
Addition |
+ |
Subtraction |
– |
Bitwise shift |
<<, >>, >>> |
Relational |
<, <=, >, >= |
In |
in |
Instance of |
instanceof |
Equality |
==, !=, ===, |
Bitwise AND |
& |
Bitwise XOR |
^ |
Bitwise OR |
| |
Logical AND |
&& |
Logical OR |
|| |
Conditional |
?: |
Assignment |
+, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |= |
Comma |
, |
In the next section of the tutorial, we will discuss JavaScript Flow Control and its uses which is important to instruct the program to execute a code only under certain conditions.