Operators supported by javascript fall under below categories.
1. Arithmetic(or Mathematical) operators.
2. Comparison operators.
3. Logical operators.
4. Assignment operators.
5. Type operators.
6. Bitwise operators.
7. Ternary operator
All of the above categories and the operators under each category are explained below.
1. Arithmetic operators
These operators are used for performing arithmetic operations over numbers.
Following are the arithmetic operators available in javascript.
| Symbol | Description |
|---|---|
| + | Addition operator, used for adding two or more values |
| – | Subtraction operator, used for subtracting two or more values |
| / | Division operator, used for dividing two numbers |
| % | Modulus operator, used for getting the remainder of division |
| ++ | Increment operator, for adding 1 to a value |
| – – | Decrement operator, for subtracting 1 from a value |
| ** | Exponentiation operator, for raising power to a number |
All of these operators are described in detail below.
+ (Addition): Used for adding two or more values and returns the sum of those values.
Values can be direct numbers or variables holding those numbers. Example,
let sum = 10 + 20; // adding values let x = 10; let y = 20; let sum = x + y; // adding variables
Addition operator can also be used to concatenate two strings or a string with a number. Example,
let x = 10; let lang = 'javascript'; let sum = lang + x; // results in javascript10
-(Subtraction): Used for subtracting two or more values and returns the difference. Example,
let x = 30; let y = 10; let diff = x - y; // subtract two values, returns 20
/ (Division): Divides two numbers and returns the result. Example, 16/3 will return 5.333333
% (Modulus): Returns the remainder of division of two numbers. Example, 16 % 3 returns 1.
++ (Increment): This operator when applied after a variable increases its value by 1. Example,
let x = 5; x++; // increases value of x by 1 console.log(x); // prints 6
Note that this operator cannot be applied directly to a number, it can be applied only to a variable. Thus, 5++ is invalid.
x++ is translated to x = x + 1 behind the scenes.
– – (Decrement): This operator when applied after a variable decreases its value by 1. Example,
let x = 5; x--; // decreases value of x by 1 console.log(x); // prints 4
Note that this operator cannot be applied directly to a number, it can be applied only to a variable. Thus, 5– is invalid.
x– is translated to x = x – 1 behind the scenes.
** (Exponentiation): This operator is used for raising a number to the power of another number.
When used between two numbers(or variables), then left hand number(or variable) is raised to the power of right hand number(or variable).
Example, 5 ** 2 returns 25
This operator is added to javascript in ECMAScript 2016.
2. Comparison operators
These operators are used to compare one value(or variable) with another value(or variable) to check if one value is lesser, greater, equal or not equal to other value.
Result of these operators is always a boolean value(true or false).
Following comparison operators are supported by javascript.
| Symbol | Description | Syntax |
|---|---|---|
| > | Greater than operator | x > y |
| < | Lesser than operator | x < y |
| >= | Greater than or equal to | x >= y |
| <= | Lesser than or equal to | x <= y |
| == | Equal to operator | x == y |
| != | Not equal to | x != y |
| === | Equal value and type | x === y |
| !== | Not equal value or not equal type | x !== y |
All of the above mentioned comparison operators are elaborated below.
> (greater than): This operator checks if one value is greater than another.
It returns true if the value at the left is greater than the value to the right of this operator, false otherwise.
Note that you can compare directly values, variables or a value with a variable. Example,
const x = 10; const y = 5; // compare variables console.log(x > y); // prints true // compare values console.log(20 > 30); // prints false // compare value with variable console.log(x > 10); // prints false
It returns
true if the value at the left is lesser than the value to the right of this operator, false otherwise.Note that you can compare directly values, variables or a value with a variable.
Example,
const x = 10; const y = 5; // compare variables console.log(x < y); // prints false // compare values console.log(20 < 30); // prints true // compare value with variable console.log(x < 10); // prints false
>= (greater than or equal to): This operator is similar to greater than but it also checks if the left value is greater than or equal to the right value.
Thus, 5 > 5 will return false but 5 >= 5 returns true.
Example,
const x = 10; const y = 5; // compare variables console.log(x >= y); // prints true // compare values console.log(20 >= 30); // prints false // compare value with variable console.log(x >= 10); // prints true
<= (lesser than or equal to): This operator is similar to lesser than(<) but it also checks if the left value is lesser than or equal to the right value.
Thus, 5 < 5 will return false but 5 <= 5 returns true.
Example,
const x = 10; const y = 5; // compare variables console.log(x <= y); // prints false // compare values console.log(20 <= 30); // prints true // compare value with variable console.log(x <= 10); // prints true
==(equal to): This operator consists of two equal to(=) signs.
It compares the values of left and right operands and returns true only if both are equal, false otherwise.
Example,
const x = 10; const y = 20; console.log(x == y); // returns false console.log(x == 10); // returns true
!= (not equal to): This operator is the reverse of equal to operator(==) and comprises of an exclamation mark(!) followed by equal to(=) sign.
It compares the values of left and right operands and returns true only if both are not equal, false otherwise.
Example,
const x = 10; const y = 20; console.log(x != y); // returns true console.log(x != 10); // returns false
=== (equal value and type): Equal to(==) operator compares only values and returns true if the values are equal even if their types are different.
That is, 5 == '5' will return true even if they are of different types since their values are same.
When you want to ensure that types of values are also checked besides their values, then this operator should be used.
It will return true when both values and their data types are same.
Thus, 5 === '5' will return false and '5' === '5' will be true.
Though == and === work the same way but there is a difference between both these operators.
!== (not equal value or not equal type): This operator compares the values as well as the data types of its operands and returns true if any of these do not match.
It will return false when values and types of both the operands are same. Example,
console.log('javascript' !== 'javascript'); // will be false
console.log(20 !== '20'); // will be true
3. Logical operators
These operators are used for defining complex conditions in conditional statements(such as if).
Left and right operands of logical operators returns a boolean value and thus, result of logical operators always returns a boolean value(true or false).
Following comparison operators are provided in javascript.
| Symbol | Description | Syntax |
|---|---|---|
| && | AND operator | x && y |
| || | OR operator | x || y |
| ! | NOT operator | !(x == y) |
&& (AND): This operator returns true only if both the left and right operands evaluate to true.
If any one of those is false, then overall result of using && is false.
Example,
const x = 5; const lang = 'javascript'; console.log(x == 5 && lang == 'javascript'); // prints true console.log(x > 5 && lang == 'javascript'); // prints false
Remember that && is a short cut operator.
This means that if the left hand operand(or condition) of && is false, then right hand condition is not evaluated.
This is because if the first condition is false, then anyway the final result will be false, thus it is not checked.
Second condition is checked only when the first condition is true.
|| (OR): This operator returns true if any of the left and right operands evaluate to true.
If both the conditions are false, then overall result of using || is false. Example,
const x = 5; const lang = 'javascript'; console.log(x == 5 || lang == 'javascript'); // prints true console.log(x > 5 || lang == 'javascript'); // prints true console.log(x > 5 || lang != 'javascript'); // prints false
Remember that || is a also short cut operator.
This means that if the left hand operand(or condition) of || is true, then right hand condition is not evaluated.
This is because if the first condition is true, then anyway the final result will be true, thus it is not checked. Second condition is checked only when the first condition is false.
! (NOT) operator: This operator reverses the boolean output returned by the condition before which it is applied.
Example, !(x == 5) will return false if the value stored in x will be 5.
This is because x == 5 will be true and applying ! before it will change the returned value to false.
Note that this operator can be used along with other operators.
Only pre-requisite is that the condition before which it is used should return either true or false.
These operators are used to assign values to a variable. Following are the assignment operators in javascript.
| Symbol | Description | Syntax | Behind the scenes |
|---|---|---|---|
| = | Assign operator | x = y | x = y |
| += | Add and assign | x += y | x = x + y |
| -= | Subtract and assign | x -= y | x = x – y |
| *= | Multiply and assign | x *= y | x = x * y |
| /= | Divide and assign | x /= y | x = x / y |
| %= | Modulus and assign | x %= y | x = x % y |
= (assign) operator: This operator is used to assign a value to a variable. Example, x = 10, name = 'John' etc.
Assigned value may also come from another variable as x = y.
+= (add and assign) operator: It adds the value to the right to the existing value of the variable at the left.
Note that right side can be a value or a variable but left side should be a variable.
Valid examples are,
x = 19; x+=5; // x becomes 24 y = 32; z = 18; z += y; // z becomes 50
x += 10 is a short-hand for x = x + 10.
-= (subtract and assign) operator: Same as += but instead of adding it subtracts.
*= (multiply and assign): Multiplies the value at the right with the existing value of the left hand variable. Example,
x = 25; x *= 6; // x becomes 150
/= (divide and assign) operator: Divides the value stored in left hand variable with the value given to the right of operator. Example,
x = 20; x /= 6; // x becomes 3.3333
%= (modulus and assign) operator: Divides the value stored in left hand variable with the value given to the right of operator and assigns the remainder of division to the left hand variable.
Example,
x = 20; x %= 6; // x becomes 2
4. Type operators
These operators are used to determine the type of value stored in a variable or check the object type at run time.
Following are the two type operators provided by javascript.
typeof operator: This operator is used for determining the type of a value. Example,
console.log(typeof 'javascript'); // prints string
x = 20.5;
console.log(typeof x); // prints number
obj = {message: 'Hello world'};
console.log(typeof obj); // prints object
This operator can be used to perform some action based on the type of the value stored in a variable. Example,
x = 5
// check if value is a number
if(typeof x == 'number') {
// convert it to a string
x = x.toString()
}
console.log(typeof x); // prints string
instanceof operator: This operator is used to check the if the value of a variable belongs to the class name at the right side.
While typeof returns the type of the value, instanceof returns true or false depending on the variable value is of the same type as checked.
Example,
message = 'Hello World!'; // check if message contains string value console.log(message instanceof String); // prints true
5. Bitwise operators
These operators work on binary digits(0 and 1) of numbers.
Following are the bitwise operators available in javascript.
| Symbol | Description | Syntax |
|---|---|---|
| & | Bitwise AND operator | x & y |
| | | Bitwise OR operator | x | y |
| ~ | NOT operator | x ~ y |
| ^ | XOR operator | x ^ y |
| << | Left shift operator | x << y |
| >> | Right shift operator | x >> y |
Bitwise & operator: Performs AND operation over bits of its operands. Following is the result of bitwise AND operation of 0 and 1.
| First operand | Second operand | Result |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |
Thus, the result will be 1 only if both the operands are 1. This is similar to && operator where the result is true only if both the operands are true.
Example of Bitwise AND operator is,
const x = 7 & 6; console.log(x); // prints 6
7 when converted to binary is 0111. 6 converted to binary is 0110. When & is applied to these values, the result as per the above table is 0110 which evaluates to 6.
Bitwise | operator: Performs OR operation over bits of its operands. Represented by a single pipe(|).
Following is the result of bitwise OR operation of 0 and 1.
| First operand | Second operand | Result |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |
Thus, the result will be 1 if any of the two operands is 1. This is similar to || operator where the result is true if any operand is true.
Example of Bitwise OR operator is,
const x = 7 | 6; console.log(x); // prints 7
7 when converted to binary is 0111. 6 converted to binary is 0110. When | is applied to these values, the result as per the above table is 0111 which evaluates to 7.
~ (NOT) operator: This operator when applied to a value reverses the digits in its binary representation.
That is, converts 1 to 0 and vice-versa.
Example, ~7 will return 8 since 7 in binary is 0111. Reversing its binary digits converts it to 1000 which is 8.
^ (XOR) operator: Performs XOR operation over the binary digits of its operands.
An XOR operation over two binary digits produces a 1 if either of the digits is 1 and produces 0 if both digits are 0 or 1. XOR operation can be represented by following table.
| First operand | Second operand | Result |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
Thus, 7 ^ 8 will result in 15 since 7 in binary is 0111 and 8 in binary is 1000. The result of XOR operation over each of their digits as per above table is 1111 which is 15.
<<(left shift) operator: It shifts the binary digits of the left operand to number of places equal to the value of right operand towards left.
Note that if there are no places to shift left then additional zeroes are added towards the right. That is,
0100 << 1 will shift digits of left operand 1 place towards left changing it to 1000.
0100 << 2 will be converted to 010000.
Example, 5 << 2 will be 20. 5 in binary is 0101. Shifting digits to two places will result in 010100 which is 20.
>>(right shift) operator: It shifts the binary digits of left operand to number of places equal to the value of right operand towards right.
Note that empty place towards left after shifting are replaced by 0.
Example,
9 >> 1 will be 4 since 9 in binary is 1001. Shifting 1 place to right makes it 0100 which is 4.
9 >> 2 will be 2 since 9 in binary is 1001. Shifting 2 place to right makes it 0010 which is 2.
7. Ternary operator
This operator comprises of two symbols ? and :. It is used to execute one out of two statements depending on whether the condition is true or false.
Syntax
(condition) ? <statement 1> : <statement 2>
where statement 1 is executed when the condition is true and statement 2 is executed when the condition is false. Example,
let y = 230; (y == 10)?console.log(10):console.log(20); // prints 20 const num1 = 10; const num2 = 20; const num3= (num1 > num2) ? num1 : num2; // num3 is 20
That is all on javascript operators.