JavaScript operators are symbols which are used to assign values, compare values, perform arithmetic operations, and more.
- The variables (operations) are called operands.
- The operation (to be performed between the two operands) is defined by an operator.
JavaScript supports the following types of operators.
- Arithmetic Operators
- Comparison Operators
- Logical (or Relational) Operators
- Assignment Operators
- Conditional (or ternary) Operators
- String Operators
- Type Operators
- Bitwise Operators
JavaScript Arithmetic Operators –
Arithmetic operators perform arithmetic operations on numbers.
Operator | Description |
---|---|
+ | Addition |
– | Subtraction |
* | Multiplication |
/ | Division |
% | Modulus (Remainder) |
++ | Increment |
— | Decrement |
Example –
var x = 100 + 50;
// Addition var a = 4; var b = 3; var x = a + b; // adding 2 variables var x = (100 + 50) * a; // expressions // Subtraction var x = 5; var y = 2; var z = x - y; // Multiplication var x = 5; var y = 2; var z = x * y; // Division var x = 5; var y = 2; var z = x / y; // Modulo var x = 5; var y = 2; var z = x % y; // Increment var x = 5; x++; var z = x; // Decrement var x = 5; x--; var z = x;
Associativity –
Associativity determines the way in which operators of the same precedence are parsed. For example, consider an expression:
a OP b OP c // OP means a operator
Left-associativity (left-to-right) means that it is processed as (a OP b) OP c
, while right-associativity (right-to-left) means it is interpreted as a OP (b OP c)
.
Operator Precedence –
Operator precedence describes the order in which operations are performed in an arithmetic expression.
Example –
var x = 100 + 50 * 3;
As in traditional school mathematics, the multiplication is done first. Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
Precedence | Operator type | Associativity | Individual operators |
---|---|---|---|
20 | Grouping | n/a | ( … ) |
19 | Member Access | left-to-right | … . … |
Computed Member Access | left-to-right | … [ … ] | |
new (with argument list) | n/a | new … ( … ) | |
Function Call | left-to-right | … ( … ) | |
18 | new (without argument list) | right-to-left | new … |
17 | Postfix Increment | n/a | … ++ |
Postfix Decrement | … -- | ||
16 | Logical NOT | right-to-left | ! … |
Bitwise NOT | ~ … | ||
Unary Plus | + … | ||
Unary Negation | - … | ||
Prefix Increment | ++ … | ||
Prefix Decrement | -- … | ||
typeof | typeof … | ||
void | void … | ||
delete | delete … | ||
await | await … | ||
15 | Exponentiation | right-to-left | … ** … |
14 | Multiplication | left-to-right | … * … |
Division | … / … | ||
Remainder | … % … | ||
13 | Addition | left-to-right | … + … |
Subtraction | … - … | ||
12 | Bitwise Left Shift | left-to-right | … << … |
Bitwise Right Shift | … >> … | ||
Bitwise Unsigned Right Shift | … >>> … | ||
11 | Less Than | left-to-right | … < … |
Less Than Or Equal | … <= … | ||
Greater Than | … > … | ||
Greater Than Or Equal | … >= … | ||
in | … in … | ||
instanceof | … instanceof … | ||
10 | Equality | left-to-right | … == … |
Inequality | … != … | ||
Strict Equality | … === … | ||
Strict Inequality | … !== … | ||
9 | Bitwise AND | left-to-right | … & … |
8 | Bitwise XOR | left-to-right | … ^ … |
7 | Bitwise OR | left-to-right | … | … |
6 | Logical AND | left-to-right | … && … |
5 | Logical OR | left-to-right | … || … |
4 | Conditional | right-to-left | … ? … : … |
3 | Assignment | right-to-left | … = … |
… += … | |||
… -= … | |||
… **= … | |||
… *= … | |||
… /= … | |||
… %= … | |||
… <<= … | |||
… >>= … | |||
… >>>= … | |||
… &= … | |||
… ^= … | |||
… |= … | |||
2 | yield | right-to-left | yield … |
yield* | yield* … | ||
1 | Comma / Sequence | left-to-right | … , … |
JavaScript Comparison Operators –
Comparison and Logical operators are used to test for true or false. Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x = 5, the table below explains the comparison operators:
Operator | Description | Comparing | Returns |
---|---|---|---|
== | equal to | x == 8 | false |
x == 5 | true | ||
x == “5” | true | ||
=== | equal value and equal type | x === 5 | true |
x === “5” | false | ||
!= | not equal | x != 8 | true |
!== | not equal value or not equal type | x !== 5 | false |
x !== “5” | true | ||
x !== 8 | true | ||
> | greater than | x > 8 | false |
< | less than | x < 8 | true |
>= | greater than or equal to | x >= 8 | false |
<= | less than or equal to | x <= 8 | true |
Example –
if (age < 18) text = "Too young"; var voteable = (age < 18) ? "Too young":"Old enough"; // ternary operator // if -else example age = Number(age); if (isNaN(age)) { voteable = "Input is not a number"; } else { voteable = (age < 18) ? "Too young" : "Old enough"; }
JavaScript Logical (or Relational) Operators –
Comparison and Logical operators are used to test for true or false. Logical operators are used to determine the logic between variables or values.
Given that x = 6 and y = 3, the table below explains the logical operators:
Operator | Description | Example |
---|---|---|
&& | and | (x < 10 && y > 1) is true |
|| | or | (x == 5 || y == 5) is false |
! | not | !(x == y) is true |
JavaScript Assignment Operators –
Assignment operators assign values to JavaScript variables.
Operator | Example | Same As |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x – y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
<<= | x <<= y | x = x << y |
>>= | x >>= y | x = x >> y |
>>>= | x >>>= y | x = x >>> y |
&= | x &= y | x = x & y |
^= | x ^= y | x = x ^ y |
|= | x |= y | x = x | y |
**= | x **= y | x = x ** y |
The **= operator is an experimental part of the ECMAScript 2016 proposal (ES7). It is not stable across browsers. Do not use it.
Example –
// The = assignment operator assigns a value to a variable. var x = 10; // The += assignment operator adds a value to a variable. x += 5; //The -= assignment operator subtracts a value from a variable. var x = 10; x -= 5; // The *= assignment operator multiplies a variable. var x = 10; x *= 5; // The /= assignment divides a variable. var x = 10; x /= 5; // The %= assignment operator assigns a remainder to a variable. var x = 10; x %= 5;
JavaScript Conditional (Ternary) Operator –
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax –
variablename = (condition) ? value1:value2
Example –
var voteable = (age < 18) ? "Too young":"Old enough";
JavaScript String Operators –
The + operator can also be used to add (concatenate) strings.
var txt1 = "John"; var txt2 = "Doe"; var txt3 = txt1 + " " + txt2;
Output –
John Doe
The += assignment operator can also be used to add (concatenate) strings:
var txt1 = "What a very "; txt1 += "nice day";
Output –
What a very nice day
Adding Strings and Numbers –
Adding two numbers, will return the sum, but adding a number and a string will return a string:
Example –
var x = 5 + 5; var y = "5" + 5; var z = "Hello" + 5;
Output –
10 55 Hello5
JavaScript Type Operators –
Operator | Description |
---|---|
typeof | Returns the type of a variable |
instanceof | Returns true if an object is an instance of an object type |
JavaScript Bitwise Operators –
Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
Operator | Description | Example | Same as | Result | Decimal |
---|---|---|---|---|---|
& | AND | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | OR | 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | NOT | ~ 5 | ~0101 | 1010 | 10 |
^ | XOR | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | Zero fill left shift | 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | Signed right shift | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
>>> | Zero fill right shift | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |