Operators? Does it ring a bell? Yes, during our school/college days, we must come across the term “Operators.” In mathematics, an operator refers to any symbol that indicates an operation that has to perform. In the same vein, it is no different when it comes to Javascript. We are going to talk in detail about Javascript operators in this article. Therefore, let’s get started.

## What are JavaScript Operators?

Operators are the symbols or keywords which signifies the operation that needs to carry out on the operands. In other words, an operator is capable of either manipulating a particular value or producing a result by comparing or operating on the given values. Like other programming languages, JavaScript also supports multiple types of operators. We will be covering the following in this article:

• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators
• Bitwise Operators
• Miscellaneous Operators

### Arithmetic Operators:

Arithmetic Operators are symbols that represent mathematical operations. Additionally, the arithmetic operator takes two operands and performs a calculation on them. JavaScript supports the following arithmetic operators:

 Name Operator Syntax Example Addition + Output = var1+var2; Output = 5+3; Subtraction – Output = var1-var2; Output = 5-3; Multiplication * Output = var1*var2; Output = 5*3; Division / Output = var1/var2; Output = 5/3; Modulus % Output = var1%var2; Output = 5%3; Pre Increment ++ ++output var output = 5; ++output; Post Increment ++ output++ var output = 5; output++; Pre Decrement – – –output var output = 5; – -output; Post Decrement – – output– var output = 5; output- -;

Note: As we can see from the “syntax” and “Example” column above, we use the Simple assignment operator (=) to assign the calculated value of the arithmetic operators to the operand. Moreover, this operator is used to assign the right-side value to the left-side variable. Additionally, we will cover the details of this operator in the next section of “Assignment Operators”.

Now let’s understand the Arithmetic as mentioned above operators in detail:

• Addition (+):  This operator provides the sum of two operands.

• Subtraction (-): This operator provides the difference of two operands.

• Multiplication (*): This operator provides a multiplied value of two operands.

• Division (/): This operator provides a divided value of two operands.

• Modulus (%): This operator provides a remainder value of two operands.

• Pre-Increment (++variable): This operator increments the integer value by one before its usage or assignment.

• Post-Increment (variable++): This operator will increment the integer value by one after its usage or assignment.

• Pre-Decrement (–variable): This operator will decrement the integer value by one before its usage or assignment.

• Post-Decrement (variable–): This operator will decrement the integer value by one after its usage or assignment.

Let’s create a simple example using all the arithmetic as mentioned above operators:

Open any text editors like notepad++. After that, type the above code. Save the file with name arithmeticOperators.html. Thereafter, open it in any browser (Chrome, Firefox or IE). It should show the output as: ### Assignment Operators:

Assignment operators are used to assigning values to a variable. Additionally, the left-hand side of the operator is a variable. And the right-hand side of the operator is the value that is going to be assigned to a variable. JavaScript supports the following assignment operators:

 Name Operator Syntax Example Simple Assignment = Output = var1; myVal = 3; output : 3 Addition and Assign += Output += var1; var myVal = 5; myVal += 5; output: 10 Subtraction and Assign -= Output -= var1; var myVal = 10; myVal -= 5; output: 5 Multipliy and Assign *= Output *= var1; var myVal = 5; myVal *= 5; output: 25 Divide and Assign /= Output /= var1; var myVal = 25; myVal /= 5; Output: 5 Modulus and Assign %= Output %= var1; var myVal= 54; myVal %= 5; output: 4

Now lets understand the above mentioned Assignment operators in detail.

• Simple Assignment ( = ): This operator assigns the right-side value to left-side variable.

Example:

• Addition and Assign ( += ): This operator adds the value of the left-side variable with right-side value. Finally, it assigns the total to the left-side variable.

Example:

• Subtraction and Assign ( -= ): This operator subtracts the value of the right-side variable from left-side value. Finally, it assigns the subtracted value to the left-side variable.

• Multiply and Assign ( *= ): This operator multiplies the value of the left-side variable with right-side value. Consequently, it assigns the multiplied value to the left-side variable.

• Divide and Assign ( /= ): This operator divides the value of the left-side variable with the right-side value. Finally, it assigns the divided value to the left-side variable.

• Modulus and Assign ( %= ): This operator finds the modulus of the value of the left-side variable with right-side value. Thereafter, it assigns the remainder value to the left-side variable.

Let’s create a simple example using above all the assignment operators.

Save the file with name assignmentOperators.html. After that, open it in a browser. ### Comparison Operators:

Comparison operators are used to comparing the values of two operands. For Example: Validating if operand1 value is equal to operand2, or if operand1 value is greater than operand2, etc. In any case, the result of a comparison operator will always be a boolean value. In other words, either true or false.  JavaScript supports the following comparison operators:

 Name Operator Syntax Example Equals to == output = var1==var2; Output = 3==3; Not Equals To != Output = var1!=var2; Output = 5!=4; Greater Than > Output = var1>var2; Output = 5>4; Greater Than or Equal To >= Output = var1>=var2; Output = 5>=5; Lesser Than < Output = var1

Now let’s understand the Comparison as mentioned above operators in detail.

• Equals to ( == ): This operator compares whether operand1 value is equal to operand2. If given condition satisfies, then the result will be true, otherwise false. E.g., Consider below code-snippet:

• Not Equals To (!=):  This operator compares whether operand1 value is not equal to operand2. If given condition satisfies, then the result will be true, otherwise false. E.g., Consider below code-snippet:

• Greater Than(>):  This operator compares whether the operand1 value is greater than operand2. If given condition satisfies then, the result will be true; otherwise, false. E.g., Consider below code-snippet:

• Greater Than or Equal To (>=):  This operator compares whether operand1 value is greater than or equal to operand2. If given condition satisfies, then the result will be true, otherwise false. E.g., Consider below code-snippet:

• Lesser Than(<):  This operator compares whether operand1 value is lesser than operand2. If given condition satisfies, then the result will be true, otherwise false. E.g., Consider below code-snippet:

• Lesser Than or Equal To (<=):  This operator compares whether operand1 value is lesser than or equal to operand2. If given condition satisfies, then the result will be true, otherwise false. E.g., Consider below code-snippet:

For instance, let’s create a simple example using above all the comparison operators.

Save the file with name comparisonOperators.html. After that, open it in any browser. ### Logical Operators:

Logical operators are primarily used to control program flow. Usually, you will find them as part of an if, while, or some other conditional statement. Additionally, explanation and more details of the conditional statement will come in later tutorials. The concept of logical operators is simple. They enable a program to make a decision based on multiple conditions. In other words, each operand is considered a condition that can evaluate to a true or false value.

JavaScript supports the following logical operators:

 Name Operator Syntax Example AND Operator && output = var1&&var2; Output = true&&true; OR Operator || Output = var1||var2; Output = false||true; NOT Operator ! Output = !var1; Output = !false;

Now let’s understand the above mentioned Logical operators in detail:

• AND Operator (&&): If both operands opr1 and opr2 are true, only then the condition will become true else it will be false. Additionally, it follows the simple Truth table, as shown below:
 Operand1 Operand2 Operand1 AND Operand2 TRUE TRUE TRUE TRUE FALSE FALSE FALSE TRUE FALSE FALSE FALSE FALSE

The logic can be illustrated and validated with the help of the following code snippet:

• OR Operator (||): If either of operands opr1 or opr2 is true, only then the condition will become true else it will be false. In addition to this, it follows the simple Truth table, as shown below:
 Operand1 Operand2 Operand1 OR Operand2 TRUE TRUE TRUE TRUE FALSE TRUE FALSE TRUE TRUE FALSE FALSE FALSE

The logic can be illustrated and validated with the help of the following code snippet:

• NOT Operator ( ! ): Invert the boolean value of the operand. In other words, if the operand value is true, then the inverted value will be false and vice versa. Additionally, it is a unary operator, which means that it works on a single operand. It follows the simple Truth table, as shown below:
 Operand NOT Operand TRUE FALSE FALSE TRUE

The logic can be illustrated and validated with the help of the following code snippet:

Let’s create a simple example using all the above logical operators:

Save the file with name logicalOperators.html. After that, open it in a browser. It should show the output as: ### Bitwise JavaScript Operators:

Bitwise Operators are similar to logical operators except that they work on the bit level rather than decimal, hexadecimal, or octal numbers. Additionally, Bit-level programming only deals with 0 and 1. Moreover, they are used in numerical computations to make the calculation process faster.

JavaScript supports the following bitwise operators:

 Name Operator Syntax Example Bitwise AND & output = var1&var2; Output = 2&3;; Bitwise OR | Output = var1|var2; Output = 3|2; Bitwise XOR ^ Output = var1^var2; Output = 3^2; Bitwise NOT ~ Output = ~var2; Output = ~5; Left Shift << Output = var1<> Output = var1>>var2; Output = 4>>1;

Now let’s understand the above mentioned Bitwise operators in detail:

• Bitwise AND ( & ): This operator performs ‘AND’ operation on each bit of its operands. E.g., in the below code snippet, it is equal to the calculation where firstly, convert the values of 2 and 5 in binary format. Secondly, do AND(&) of each bit. Finally, convert the binary result to the decimal result. As none of the bits on the same position is 1, the final result is 0 for & operation of all the bits individually.

• Bitwise OR ( | ): This operator performs ‘OR’ operation on each bit of its operands. E.g., in the below code snippet, it is equal to the calculation where firstly, convert the values of 2 and 5 in binary format. Secondly, do OR(|) of each bit. Lastly, convert the binary result to the decimal result. The binary result will be 0111, which converted to decimal will be equivalent to 7.

• Bitwise XOR ( ^ ): This operator performs ‘XOR’ operation on each bit of its operands. The XOR means exclusive OR operation. Here, the result will be true only when either of the operands is true, but not both.

• Bitwise NOT ( ~ ): This operator will invert all the bits on the operand.

• Left Shift (<<): This operator moves all bits to the left side by as many numbers of places as mentioned in the operand. In addition to this, new bits fill with zero value.

• Right Shift (>>): This operator will move all the bits to the right side by as many numbers of places as mentioned in the operand. In addition to this, new bits fill with zero value.

Let’s create a simple example using all the above mentioned bitwise operators.

Save the file with name bitwiseOperators.html. After that, open it in any browser (Chrome, Firefox, or IE). It should show the output as: ### Miscellaneous JavaScript Operators:

JavaScript supports the number of other operators. We are going to discuss the primary two miscellaneous operators used most often.

 Name Operator Syntax Example Type of Operator typeof output = typeof var2; Output = typeof 3;; Conditional Operator ?: Output = condition?trueStat:falseStat; Output = 3<4?’greater’:’lesser’;

Now let’s understand the above mentioned Miscellaneous operators in detail:

• typeOf Operator: The first operator is typeOf Operator. This operator is a unary operator. Additionally, it provides the data type of an operand.

• Conditional Operator (?:):  The second operator is a conditional operator. It is the only ternary operator (three operands) in JavaScript. In other words, this operator has three operands. First goes before the ‘?.’ Second goes between the ‘?’ and the ‘:.’ Third goes after the ‘:.’ If Condition is true? Then value A: Otherwise, value B.

Let’s create a simple example using above all the miscellaneous operators. ## Key Takeaways

• JavaScript provides Arithmetic Operators such as +, -, *, /, %,++, – – . Additionally, they take numerical values as their operands and return a single numerical value.
• Moreover, it provides Assignment Operators such as =, +=, -=, *=, /=, %=. Additionally, they assign the right-hand side values after needed calculations to the left-hand-side variable.
• In addition to the above, the JavaScript provides Comparison Operators such as ==, !=, >, >=, <, <= .They are compare the values of two operands.
• JavaScript provides Logical Operators such as &&, ||, ! which control the program flow. Additionally, the majority of conditional statements use them. (Note: We will discuss the conditional statements in the next tutorial)
• In addition to above, it provides Bitwise Operators such as &, |, ^, ~, <<, >>. They are similar to logical operators, but they work directly at the bit level.

Conclusively, let’s move to the next article. It will help us understand the next important construct of the JavaScript, “Conditional Statements.”