In this tutorial, you will learn about different operators available in JavaScript and how to use them with the help of examples.
What is an Operator?
In JavaScript, an operator is a special symbol used to perform operations on operands (values and variables). For example,
|
1 |
2 + 3; // 5 |
Here + is an operator that performs addition, and 2 and 3 are operands.
JavaScript Operator Types
Here is a list of different operators you will learn in this tutorial.
- Assignment Operators
- Arithmetic Operators
- Comparison Operators
- Logical Operators
- Bitwise Operators
- String Operators
- Other Operators
JavaScript Assignment Operators
Assignment operators are used to assign values to variables. For example,
|
1 |
var x = 10; |
Here, the = operator is used to assign value 10 to variable x.
Here’s a list of commonly used assignment operators:
| Operator | Name | Example |
|---|---|---|
= |
Assignment operator | a = 7; // 7 |
+= |
Addition assignment | a += 5; // a = a + 5 |
-= |
Subtraction Assignment | a -= 2; // a = a - 2 |
*= |
Multiplication Assignment | a *= 3; // a = a * 3 |
/= |
Division Assignment | a /= 2; // a = a / 2 |
%= |
Remainder Assignment | a %= 2; // a = a % 2 |
**= |
Exponentiation Assignment | a **= 2; // a = a**2 |
Note: The commonly used assignment operator is
=. You will understand other assignment operators such as+=,-=,*=etc. once we learn arithmetic operators.
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic calculations. For example,
|
1 |
const number = 4 + 6; // 10 |
Here, the + operator is used to add two operands.
| Operator | Name | Example |
|---|---|---|
+ |
Addition | x + y |
- |
Subtraction | x - y |
* |
Multiplication | x * y |
/ |
Division | x / y |
% |
Remainder | x % y |
++ |
Increment (increments by 1) | ++x or x++ |
-- |
Decrement (decrements by 1) | --x or x-- |
** |
Exponentiation (Power) | x ** y |
Example 1: Arithmetic operators in JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var x = 5, y = 10; x + y; //returns 15 y - x; //returns 5 x * y; //returns 50 y / x; //returns 2 x % 2; //returns 1 x++; //returns 6 x--; //returns 4 |
Try This Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <body> <h1> JavaScript Arithmatic Operators</h1> <p>x = 5, y = 10;</p> <p id="p1">x+y=</p> <p id="p2">y-x=</p> <p id="p3">x*y=</p> <p id="p4">y/x=</p> <p id="p5">x%2=</p> <p id="p6">x++=</p> <p id="p7">x--=</p> <script> var x = 5, y = 10; document.getElementById("p1").innerHTML += x + y; //returns 15 document.getElementById("p2").innerHTML += y - x; //returns 5 document.getElementById("p3").innerHTML += x * y; //returns 50 document.getElementById("p4").innerHTML += y / x; //returns 2 document.getElementById("p5").innerHTML += x % 2; //returns 1 x++; document.getElementById("p6").innerHTML += x; //returns 6 x--; document.getElementById("p7").innerHTML += x; //returns 5 </script> </body> </html> |
Output:
JavaScript Comparison Operators
Comparison operators compare two values and return a boolean value, either true or false. For example,
| Operator | Name | Example | Result |
|---|---|---|---|
== |
Equal | x == y |
True if x is equal to y |
=== |
Identical | x === y |
True if x is equal to y, and they are of the same type |
!= |
Not equal | x != y |
True if x is not equal to y |
!== |
Not identical | x !== y |
True if x is not equal to y, or they are not of the same type |
< |
Less than | x < y |
True if x is less than y |
> |
Greater than | x > y |
True if x is greater than y |
>= |
Greater than or equal to | x >= y |
True if x is greater than or equal to y |
<= |
Less than or equal to | x <= y |
True if x is less than or equal to y |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var x = 25; var y = 35; var z = "25"; alert(x == z); // Outputs: true alert(x === z); // Outputs: false alert(x != y); // Outputs: true alert(x !== z); // Outputs: true alert(x < y); // Outputs: true alert(x > y); // Outputs: false alert(x <= y); // Outputs: true alert(x >= y); // Outputs: false |
Try This Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <head> <title>JavaScript Comparison Operators</title> </head> <body> <h1>JavaScript Comparison Operators</h1> <script> var x = 25; var y = 35; var z = "25"; document.write(x == z); // Prints: true document.write("<br>"); document.write(x === z); // Prints: false document.write("<br>"); document.write(x != y); // Prints: true document.write("<br>"); document.write(x !== z); // Prints: true document.write("<br>"); document.write(x < y); // Prints: true document.write("<br>"); document.write(x > y); // Prints: false document.write("<br>"); document.write(x <= y); // Prints: true document.write("<br>"); document.write(x >= y); // Prints: false </script> </body> </html> |
Output:
Comparison operators are used in decision-making and loops. You will learn about the use of comparison operators in detail in later tutorials.
JavaScript Logical Operators
Logical operators perform logical operations and return a boolean value, either true or false. For example,
|
1 2 |
const x = 5, y = 3; (x < 6) && (y < 5); // true |
Here, && is the logical operator AND. Since both x < 6 and y < 5 are true, the result is true.
| Operator | Name | Example | Result |
|---|---|---|---|
&& |
And | x && y |
True if both x and y are true |
|| |
Or | x || y |
True if either x or y is true |
! |
Not | !x |
True if x is not true |
The following example will show you how these logical operators actually work:
|
1 2 3 4 5 6 7 8 |
var year = 2016; // Leap years are divisible by 400 or by 4 but not 100 if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){ alert(year + " is a leap year."); } else{ alert(year + " is not a leap year."); } |
Try This Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <head> <title>JavaScript Logical Operators</title> </head> <body> <script> var year = 2016; // Leap years are divisible by 400 or by 4 but not 100 if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){ document.write(year + " is a leap year."); } else{ document.write(year + " is not a leap year."); } </script> </body> </html> |
Output:
2016 is a leap year.
JavaScript Bitwise Operators
Bitwise operators perform operations on binary representations of numbers.
| Operator | Name | Description |
|---|---|---|
| & | AND | Sets each bit to 1 if both bits are 1 |
| | | OR | Sets each bit to 1 if one of two bits is 1 |
| ^ | XOR | Sets each bit to 1 if only one of two bits is 1 |
| ~ | NOT | Inverts all the bits |
| << | Zero fill left shift | Shifts left by pushing zeros in from the right and let the leftmost bits fall off |
| >> | Signed right shift | Shifts right by pushing copies of the leftmost bit in from the left, and let the rightmost bits fall off |
| >>> | Zero fill right shift | Shifts right by pushing zeros in from the lef |
JavaScript String Operators
In JavaScript, you can also use the + operator to concatenate (join) two or more strings.
Example 4: String operators in JavaScript
|
1 2 3 |
var txt1 = "Dharmendra"; var txt2 = "Yadav"; var txt3 = txt1 + " " + txt2; |
Try This Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <h2>JavaScript Operators</h2> <p>The + operator concatenates (adds) strings.</p> <script> var txt1 = "Dharmendra"; var txt2 = "Yadav"; document.write(txt1 + " " + txt2); </script> </body> </html> |
Note: When
+is used with strings, it performs concatenation. However, when+is used with numbers, it performs addition.
Other JavaScript Operators
Here’s a list of other operators available in JavaScript. You will learn about these operators in later tutorials.
| Operator | Description | Example |
|---|---|---|
, |
evaluates multiple operands and returns the value of the last operand. | let a = (1, 3 , 4); // 4 |
?: |
returns value based on the condition | (5 > 3) ? 'success' : 'error'; // "success" |
delete |
deletes an object’s property, or an element of an array | delete x |
typeof |
returns a string indicating the data type | typeof 3; // "number" |
void |
discards the expression’s return value | void(x) |
in |
returns true if the specified property is in the object |
prop in object |
instanceof |
returns true if the specified object is of of the specified object type |
object instanceof object_type |
