Operators are the symbols between values that allow different operations like addition, subtraction, multiplication, and more. JavaScript has dozens of operators, so let’s focus on the ones you’re likely to see most often.
Operators are symbols that we use in our code to perform a specific task. These can range from something as simple as adding or subtracting some numbers to comparing data types in our code. It never hurts to get familiar with as many as many operators as you can and knowing when to use them can save you a lot of frustration and time as well as improving your overall experience while coding. Today we’ll cover the most common ones as well as how to use them.
All operators coerce (as discussed in Type Coercion) their operands to appropriate types. Most operators only work with primitive values (e.g., arithmetic operators and comparison operators). That means that objects are converted to primitives before anything is done with them. One example where that is unfortunate is the plus operator, which many languages use for array concatenation.
JavaScript has the following types of operators. This section describes the operators and contains information about operator precedence.
Assignment operators
Conditional (ternary) operator
Comma operator
Unary operators
Relational operators
Comparison operators
Arithmetic operators
Bitwise operators
Logical operators
String operators
Operators are used for comparing values, perform arithmetic operations, etc. For example, if we take a simple expression, 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript consists of different types of operators that are used to perform different operations. JavaScript operators are symbols that are used to perform operations on operands. For example -
var sum=10+20;
JavaScript comes with a set of operators you'd expect from any modern language. There are four categories: arithmetic, comparison, assignment, and logical.
JavaScript has both binary and unary operators, and one special ternary operator, the conditional operator. A binary operator requires two operands, one before the operator and one after the operator -
operand1 operator operand2
For example, 3+4 or x*y.
A unary operator requires a single operand, either before or after the operator -
operator operand
or
operand operator
For example, x++ or ++x.
Assignment operators
An assignment operator assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x. There are also compound assignment operators that are shorthand for the operations listed in the following table −
Operator | Description | Example |
---|---|---|
= | Assign | 15+15 = 30 |
+= | Add and assign | var a=10; a+=20; Now a = 30 |
-= | Subtract and assign | var a=20; a-=10; Now a = 10 |
*= | Multiply and assign | var a=10; a*=20; Now a = 200 |
/= | Divide and assign | var a=10; a/=2; Now a = 5 |
%= | Modulus and assign | var a=10; a%=2; Now a = 0 |
Comparison operators
A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical, string, logical, or object values. Strings are compared based on standard lexicographical ordering, using Unicode values. In most cases, if the two operands are not of the same type, JavaScript attempts to convert them to an appropriate type for the comparison.
This behavior generally results in comparing the operands numerically. The sole exceptions to type conversion within comparisons involve the === and !== operators, which perform strict equality and inequality comparisons. These operators do not attempt to convert the operands to compatible types before checking equality. The following table describes the comparison operators in terms of this sample code -
The JavaScript comparison operator compares the two operands. The comparison operators are as follows -
Operator | Description | Example |
---|---|---|
== | Is equal to | 10==20 = false |
=== | Identical (equal and of same type) | 10==20 = false |
!= | Not equal to | 10!=20 = true |
!== | Not Identical | 20!==20 = false |
> | Greater than | 20>10 = true |
>= | Greater than or equal to | 20>=10 = true |
< | Less than | 20<10 = false |
<= | Less than or equal to | 20<=10 = false |
Arithmetic operators
An arithmetic operator takes numerical values (either literals or variables) as their operands and returns a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/). These operators work as they do in most other programming languages when used with floating point numbers (in particular, note that division by zero produces Infinity). For example -
Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are known as JavaScript arithmetic operators.
Operator | Description | Example |
---|---|---|
+ | Addition | 30-20 = 10 |
* | Multiplication | 20*30 = 600 |
/ | Division | 30/10 = 3 |
% | Modulus (Remainder) | 20%10 = 0 |
++ | Increment | var a=10; a++; Now a = 11 |
-- | Decrement | var a=10; a--; Now a = 9 |
Bitwise operators
A bitwise operator treats their operands as a set of 32 bits (zeros and ones), rather than as decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript numerical values.
The following table summarizes JavaScript's bitwise operators.
Operator | Description | Example |
---|---|---|
& | Bitwise AND | (10==20 & 20==33) = false |
| | Bitwise OR | (10==20 | 20==33) = false |
^ | Bitwise XOR | (10==20 ^ 20==33) = false |
~ | Bitwise NOT | (~10) = -10 |
<< | Bitwise Left Shift | (10<<2) = 40 |
>> | Bitwise Right Shift | (10>>2) = 2 |
>>> | Bitwise Right Shift with Zero | (10>>>2) = 2 |
Logical operators
Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value. The logical operators are described in the following table.
Operator | Description | Example |
---|---|---|
&& | Logical AND | (10==20 && 20==33) = false |
|| | Logical OR | (10==20 || 20==33) = false |
! | Logical Not | !(10==20) = true |
String operators
In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.
For example,
console.log('my ' + 'string'); // console logs the string "my string".
The shorthand assignment operator += can also be used to concatenate strings.
For example,
var mystring = 'alpha'; mystring += 'bet'; // evaluates to "alphabet" and assigns this value to mystring.
Comma operator
The comma operator (,) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a for loop, to allow multiple variables to be updated each time through the loop. For example, if a is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array -
var x = [0,1,2,3,4,5,6,7,8,9] var a = [x, x, x, x, x]; for (var i = 0, j = 9; i <= j; i++, j--) console.log('a[' + i + '][' + j + ']= ' + a[i][j]);