JavaScript Operators

by

In this tutorial, you will learn about different operators available in JavaScript and how to use them with the help of examples.

Thank you for reading this post, don't forget to subscribe!
Contents hide
1 What is an Operator?
2 JavaScript Operator Types
3 JavaScript Assignment Operators
4 JavaScript Arithmetic Operators
4.1 Example 1: Arithmetic operators in JavaScript
5 JavaScript Comparison Operators
5.1 JavaScript Logical Operators
5.2 JavaScript Bitwise Operators
5.3 JavaScript String Operators
5.4 Example 4: String operators in JavaScript
5.5 Other JavaScript Operators
5.6 Related posts:

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

Example
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

Example
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,

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:

Example
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

Example
1
2
3
var txt1 = "Dharmendra";
var txt2 = "Yadav";
var txt3 = txt1 + " " + txt2;

Try This Code:

Add in index.html File
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

Related posts:

  1. What is JavaScript and Why Learn JavaScript Programming language?
  2. Adding JavaScript to HTML Document
  3. Understanding the JavaScript Syntax
  4. JavaScript Variables
  5. JavaScript Output
  6. Javascript Data Types
  7. JavaScript Events
  8. JavaScript Strings
  9. JavaScript Numbers
Share on:

Recommended Articles...

Hello, I am Dharmendra Yadav and I am a Python Developer with experience in web development using Django, Flask, REST API, SQL, MySQL, HTML, CSS, JavaScript, WordPress, Oracle Cloud, AWS and Git. I also write technical articles where I explain web development and Software Engineering. Facebook , Linkedin

...

Leave a Comment