Back to: JavaScript Tutorial For Beginners and Professionals
JavaScript Operators
In this article, I am going to discuss the JavaScript operators with examples. Please read our previous article where we discussed JavaScript Hoisting. At the end of this article, you will understand the different Javascript Operators and their use in JavaScript with Examples.
Like other programming languages such as C, C++, Java, and C#, the JavaScript Operators are also going to perform some operation over data at runtime. It takes one or more operands (arguments) and produces a new value.
Operators and Operands:
The number used in arithmetic or any operation are called operands. The operation or any action that is performed between two operands is called the operator.
Example: var add=10+20; Here, + is the arithmetic operator and = is the assignment operator whereas 10 and 20 are operands
Javascript Operator Precedence:
Operators have precedence. Precedence defines the order in which the expression will be evaluated. Operators are used to building expression. Expressions are sequences of operators and operands that are evaluated to a single value.
Operator Precedence from highest to lowest.
| Precedence | Operators |
| Highest | ( ) |
| ++ — (postfix) new typeof | |
| ++ — (prefix) + – (unary) ! ~ | |
| * / % | |
| + – | |
| << >> | |
| < > <= >= is as | |
| == != | |
| Lower | & |
| Higher | ^ |
| | | |
| && | |
| || | |
| ?: | |
| Lowest | = *= /= %= += -= <<= >>= &= ^= |= |
The Parenthesis operator always has the highest precedence.
Below is the arithmetic expression.
Example: var a = 100 + 50 * 3; By looking at this example it makes us think whether the result of the above example would be 150*3 or 100+150?
Which operation will go to execute first? Whether the addition or the multiplication done first?
As we have already learned in school mathematics rules, multiplication is done first. Multiplication (*) and division ( / ) have higher precedence than addition ( + ) and subtraction ( – ). As soon as we use the parenthesis the precedence gets changed.
var a = (100 + 50) * 3;
When we use parenthesis, the operation inside the parenthesis is executed first. When we have many operations in an arithmetic expression that has the same precedences like addition and subtraction, then they are executed from left to right.
var a = 100 + 50 – 3;
Below are the different types of operators JavaScript supports:
JavaScript Arithmetic Operators with Examples:
Arithmetic operators +, -, *, / are the same as in math. The arithmetic operators are as follows:
Addition (+) Operator:
This operator adds numbers (Operands). See the following example.
var a = 5;
var b = 2;
var c = a + b;
alert(c); //7
Subtraction (-) Operator:
This operator subtracts the second number (operand) from the first operand. Have a look at the following example.
var a = 5;
var b = 2;
var c = a – b;
alert(c); //3
Multiplication (*) Operator:
This operator multiplies operands. Following is an example of Multiplication operator.
var a = 5;
var b = 2;
var c = a * b;
alert(c); //10
Division (/) Operator:
This operator divide the numerator number by denominator number. Here is an example of Divison Operator.
var a = 5;
var b = 2;
var c = a / b;
alert(c); //2.5
Modulus (%) Operator:
This operator returns the remainder from the division of numbers. The following is an example of modulus operator.
var a = 5;
var b = 2;
var c = a % b;
alert(c); //1
Increment (++) Operator
This operator increments numbers by one. Example is given below.
var a = 5;
a++;
var c = a;
alert(c); //6
Decrement (–) Operator:
This operator decrements numbers by one. The following is an example of decrement operator:
var a = 5;
a–;
var c = a;
alert(c); //4
Exponentiation (**) Operator
This operator raises the first operand/number to the power of the second operand/number. Please have a look at the following code which is an example of an exponentiation operator.
var a = 5;
var c = a ** 2;
alert(c); //25 i.e. 5**2 =5*5 that is 25.
JavaScript Comparison (Relational) Operators with Examples:
The comparison operators ==, ===, !=, !==, >, >=, < and <= are used in conditional statements to compare operands and to take the action on the output. The comparison operators are as follows:
Is equal to (==) Operator
This operator is used to compare the values of two operands to check if both are equal or not. If yes then the condition becomes true else false. In order to understand this better, please have a look at the following example.
var a = 5, b = 4;
alert(a == b); //false
Identical –equal and of the same type (===) Operator:
This three-time equal sign is called strictly equal sign it checks both operands values as well as the data type. The following is an example of this operator.
var a = 5, b = 5, c = “5”;
alert(a === b); //true
alert(a === c); //false
In the above example, a===b will return true, because the value of a and b is 5 and both are number data types, a===c will return false because the value of a and c is 5, but the data types are different.
Not equal to (!=) Operator
This operator is called not equal to. It checks the value of both operands are equal or not. If the values are not equal then the condition becomes true else false. Following is the example.
var a = 5, b = 4;
alert(a != b);//true
Not equal value or not equal type (!== ) Operator:
This operator is used to check both the values as well as the data types. It checks the values of both operands whether equal or not. If both the operand values are not equal or data types are of the same type then the condition becomes true. Please have a look at the following example to understand this better.
var a = 5, b = 4, c = “5”;
alert(a !== 5);//false
alert(a !== b);//true
alert(a !== c);//true
Greater than (>) Operator:
This operator is used to check if the left operand is greater than the right operand. When the left one is greater than the right one, the condition becomes true else false. Following is the example to understand this operator.
var a = 5, b = 4;
alert(a > b); //true
Greater than or Equal to (>= ) Operator:
This operator is used to check if the left operand is greater than or equal to the right operand. If yes then the condition becomes true else false. An example is given below.
var a = 5, b = 8, c = 5;
alert(a >= b);//false
alert(a >= c)//true
Less than (<) Operator:
This operator is used to check if the left operand is less than the right operand. When the left one is less than the right one, the condition is valid. Here is an example to understand this operator.
var a = 5, b = 4;
alert(a < b); //false
Less than or Equal to (<=) Operator
This operator is used to check if the left operand is less than or equal to the right operand. If yes then the condition becomes true else false. Please have a look at the following code which is an example of less than or equal to operator.
var a = 5, b = 8, c = 5;
alert(a <= b);//true
alert(a <= c)//true
JavaScript Bitwise Operators with Examples:
The bitwise operators are work for 32-bit integers in JavaScript. Bitwise operator ~ turns all 0 to 1 and all 1 to 0. Like ! for Boolean expressions but works bit by bit. The operators |, &, and ^ behave like bitwise ||, && and ^. The << and >> move the bits left or right.
The behavior of the operators &, | and ^:
| Operation | & | & | & | & | | | | | | | | | ^ | ^ | ^ | ^ |
| Operand1 | 0 | 0 | 1 | 1 | 0 | 0 | 1 | 1 | 0 | 0 | 1 | 1 |
| Operand2 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 |
| Result | 0 | 0 | 0 | 1 | 0 | 1 | 1 | 1 | 0 | 1 | 1 | 0 |
The bitwise operators are as follows:
Bitwise AND (&) Operator
It performs a Boolean AND operation on each bit of its integer arguments. It returns 1 if both the bits are 1 else 0. The example is shown below.
| Operation | Result | Same as | Result |
| 5&1 | 1 | 0101 & 0001 | 0001 |
Bitwise OR (|) Operator
It performs a Boolean OR operation on each bit of its integer arguments. It returns 1 if either one of the bits is 1. Please have a look at the following example.
| Operation | Result | Same as | Result |
| 5|1 | 5 | 0101 | 0001 | 0101 |
Bitwise XOR (^) Operator
It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both.it returns 1 if both the bits are different. The following is an example of the Bitwise XOR operator in JavaScript.
| Operation | Result | Same as | Result |
| 5^1 | 4 | 0101 | 0001 | 0100 |
Bitwise NOT (~) Operator:
It is a unary operator and Inverts all the bits in the operand. Please have a look at the following example to understand this operator in detail.
| Operation | Result | Same as | Result |
| ~5 | 10 | ~0101 | 1010 |
Bitwise Left Shift (<<) Operator:
This operator moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on. The example is shown below.
| Operation | Result | Same as | Result |
| 5<<1 | 10 | 0101<<1 | 1010 |
Bitwise Right Shift (>>) Operator
This operator called Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand. To understand this operator better, please have a look at the following example.
| Operation | Result | Same as | Result |
| 5>>1 | 2 | 0101>>1 | 0010 |
Bitwise Right Shift with Zero (>>>) Operator
This operator is the same as the >> (Bitwise Right Shift) operator, except that the bits shifted in on the left are always zero. Please have a look at the following example to understand this better.
| Operation | Result | Same as | Result |
| 5>>>1 | 2 | 0101>>>1 | 0010 |
JavaScript Logical Operators with Examples:
The Logical operators take Boolean operands and return a Boolean result. The operator (!) turns true to false and false to true. Behavior of the operators &&, || and ^ (1==true, 0==false):
| Operation | && | && | && | && | || | || | || | || | ^ | ^ | ^ | ^ |
| Operand1 | 0 | 0 | 1 | 1 | 0 | 0 | 1 | 1 | 0 | 0 | 1 | 1 |
| Operand2 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 |
| Result | 0 | 0 | 0 | 1 | 0 | 1 | 1 | 1 | 0 | 1 | 1 | 0 |
The logical operators are as follows:
Logical AND (&&) Operator:
This AND operator returns true if both the condition are true, otherwise, it returns false. An example is given below.
var a = 5, b = 4;
alert(a < 6 && b > 3); //true
alert(a < 6 && b < 3); //false
Logical OR (||) Operator:
This OR operator returns true if one or both the condition is true, otherwise, it returns false. The example is shown below.
var a = 5, b = 4;
alert(a == 6 || b == 3);//false
alert(a == 5 || b == 0);//true
alert(a == 0 || b == 4);//true
alert(a == 5 || b == 4);//true
Logical Not (!) Operator
This Not operator returns true for false condition and false for the true condition. Here is an example to understand this operator.
var a = 5, b = 4;
alert(!(a == b));//true
alert(!(a > b));//false
JavaScript Assignment Operators with Examples:
Assignment operators are used to assigning a value to operands. The assignments operators are as follows:
Assign (=) Operator:
This operator is used to assign values from the right-hand side operand to the left-hand side operand i.e.: C = A + B. The example is given below.
var a = 5;
alert(a);//5
Add and Assignment (+=) Operator
This operator adds the right-hand side operand value to the left-hand side operand and then assigns the output to the left operand i.e.: C = C + A is the same as C+=A. To understand this better please have a look at the following example.
var a = 5;
a += 3;
alert(a); //8
Subtract and Assignment (-=) Operator:
This operator subtracts the right-hand side operand from the left-hand side operand and then assigns the output to the left operand i.e.: C = C – A is the same as C-=A. The example is shown below.
var a = 5;
a -= 3;
alert(a); //2
Multiply and Assignment (*=) Operator
This operator multiplies the right-hand side operand with the left-hand side operand and then assigns the output to the left operand i.e.: C = C * A is the same as C*=A. The example is given below.
var a = 5;
a *= 3;
alert(a); //15
Divide and Assignment (/=) Operator:
This operator divides the left-hand side operand with the right-hand side operand and then assigns the output to the left operand i.e.: C = C / A Is the same as C/=A. Here is an example to understand this operator.
var a = 6;
a /= 3;
alert(a); //2
Modulus and Assignment (%=) Operator
This operator is used to assigns a remainder to a variable. In other words, it takes modulus by dividing two operands and assign the output to the left operand i.e.: C % = A is the same as C%=A. To understand this better, please have a look at the following example.
var a = 5;
a %= 3;
alert(a); //2
JavaScript Special Operators with Examples:
There are other operators which are categorized as special operators. The special operators are as follows:
Ternary Operator (? 🙂
Ternary operator requires one condition, variable, or value for the true case and variable or value for the false case. If the condition in the given expression is found true it assigns value to variable present in true value position else the value of false value position will be assigned.
Variable = condition? True value: false value
Variable to which you want to assign value = condition? In case of condition is true this value will be assigned: in case of condition is false this value will be assigned i.e.: C = condition? A: B. Let us see an example to understand this operator better.
var a = 5, b = 4;
var c = (a > b) ? 100: 200;
alert(c);//100
Comma Operator (,)
This comma operator allows multiple expressions to be evaluated as a single statement.
delete Operator: The delete operator deletes the property from the object.
In Operator: The In operator checks if the object has the given property.
Instanceof: The instanceof operator checks if the object is an instance of the given type
Typeof: The Typeof operator returns the data type of the variable.
new: The new operator is used to create new objects.
Void: It doesn’t return any value from condition
Yield: This operator checks what is returned in a generator by the generator’s iterator.
this: this operator references the current context. In JavaScript, the value of this depends on the current scope.
String Operator:
A string operator joins two string values of two string variables and creates a third-string value. String operators concatenate (add) two strings. Even the value is numeric in a string variable it is also concatenated. The + operator is called the concatenation operator. When used on strings. i.e.: “10” + “20” It would be 1020, not 30
String + Operator
This operator joins the string at the left-hand side with the string at the right-hand side. If the second operand is not a string, it is converted to a string automatically. For example,
var a = “Hello”, b = “Shagufta”;
c = a + b;
alert(c);//HelloShagufta
Member access Operator (.)
This member access operator is used to access the object members.
Expressions
Expressions are sequences of operators, literals and variables that are executed to some value. For example,
var r = (150 – 20) / 2 + 5; // r=70
// Expression for calculation of circle area
var surface = Math.PI * r * r;
// Expression for calculation of circle perimeter
var perimeter = 2 * Math.PI * r;
In the next article, I am going to discuss JavaScript Conditional Statements with Examples. Here, in this article, I try to explain the JavaScript Operators with examples. We are going to use these operators in our upcoming articles. I hope you enjoy this article and understand the different types of JavaScript Operators and their use.
