Operators In JavaScript

The concept of Operators is present in almost all programming languages present in today’s world. Operators are used to perform certain operations.

What Is an Operator?

In simple terms, an operator refers to the one that operates on something, like a person operating a machine to perform some dedicated task. So, the person will be an operator.

Similarly, in computer programming, an operator refers to a character that tells the machine to perform a particular operation. For example, the (+) sign is used to add two numerical values. In any programming language, this (+) sign is an operator that performs the task of adding two values.

Operand refers to the values on which you operate, In the above example, the two numeric values are the operands on which it performs the operation.

Types of Operators in Javascript

Arithmetic operators in JavaScript

Arithmetic operators in JavaScript are used when we need to perform arithmetical tasks. For example:

<!DOCTYPE html>
<html>
<body>

  <p>10 + 20 = <span id="mySpan"></span></p>
   
   <script>
      let x = 10, y = 20;
      document.getElementById("mySpan").innerHTML = x+y;
   </script>
   
</body>
</html>

Output:

10 + 20 = 30

List of all arithmetic operators in JavaScript

Addition (+)
Subtraction (-)
Multiplication (*)
Exponentiation (**)
Division (/)
Modulus (%)
Increment (++)
Decrement (–)

<!DOCTYPE html>
<html>
<body>
   
   <p id="1"></p>
   <p id="2"></p>
   <p id="3"></p>
   <p id="4"></p>
   <p id="5"></p>
   <p id="6"></p>
   <p id="7"></p>
   <p id="8"></p>
   
   <script>
      let a = 20, b = 10, c = 3, d = 4;

      res = a+b;
      document.getElementById("1").innerHTML = res;
      
      res = a-b;
      document.getElementById("2").innerHTML = res;
      
      res = a*b;
      document.getElementById("3").innerHTML = res;
      
      res = c**d;
      document.getElementById("4").innerHTML = res;
      
      res = a/b;
      document.getElementById("5").innerHTML = res;
      
      res = a%c;
      document.getElementById("6").innerHTML = res;
      
      res = a++;
      document.getElementById("7").innerHTML = res;
      
      res = a--;
      document.getElementById("8").innerHTML = res;
   </script>
   
</body>
</html>

output :

Assignment operators in JavaScript

Assignment operators in JavaScript are used to assign values. For example:

<!DOCTYPE html>
<html>
<body>
   
   <p id="abc"></p>
   <p id="xyz"></p>

   <script>
      let x;

      x = 20;
      document.getElementById("abc").innerHTML = x;
      
      x += 5;
      document.getElementById("xyz").innerHTML = x;
   </script>
   
</body>
</html>

output:

20

25

List of all assignment operators in JavaScript

Simple assign (=)
Add, then assign (+=)
Subtract, then assign (-=)
Multiply, then assign (*=)
Divide, then assign (/=)
Modulus, then assign (%=)
Exponent, then assign (**=)

JavaScript assignment operators example

<!DOCTYPE html>
<html>
<body>

   <p id="para1"></p>
   <p id="para2"></p>
   <p id="para3"></p>
   <p id="para4"></p>
   <p id="para5"></p>
   <p id="para6"></p>
   <p id="para7"></p>
   
   <script>
      let a = 20, b = 3, res;

      res = b;
      document.getElementById("para1").innerHTML = res;
      
      res += 5;
      document.getElementById("para2").innerHTML = res;
      
      res -= 5;
      document.getElementById("para3").innerHTML = res;

      res *= 5;
      document.getElementById("para4").innerHTML = res;
      
      res /= 10;
      document.getElementById("para5").innerHTML = res;
      
      a %= 3;
      document.getElementById("para6").innerHTML = a;
      
      b **= 4;
      document.getElementById("para7").innerHTML = b;
   </script>
   
</body>
</html>

output:

true

false

true

false

false

false

true

Comparison operators in JavaScript

Comparison operators in JavaScript are used to compare between two variables or values. For example:

<!DOCTYPE html>
<html>
<body>
   
   <p id="xyz"></p>

   <script>
      let x = 20;
      let y = 20;
      if(x==y) {
         document.getElementById("xyz").innerHTML = "The value of 'x' is equal to the value of 'y'";
      } else {
         document.getElementById("xyz").innerHTML = "The value of 'x' is not equal to the value of 'y'";
      }
   </script>
   
</body>
</html>

output:

The value of 'x' is equal to the value of 'y'

List of all comparison operators in JavaScript

Operator	Name
==	equal to
===	equal value and equal type
!=	not equal
!==	not equal value or not equal type
<	less than
>	greater than
<=	less than or equal to
>=	greater than or equal to

JavaScript comparison operators example

<!DOCTYPE html>
<html>
<body>
   
   <p id="para1"></p>
   <p id="para2"></p>
   <p id="para3"></p>
   <p id="para4"></p>
   <p id="para5"></p>
   <p id="para6"></p>
   <p id="para7"></p>
   <p id="para8"></p>
   <p id="para9"></p>
   <p id="para10"></p>
   <p id="para11"></p>
   <p id="para12"></p>
   <p id="para13"></p>
   <p id="para14"></p>
   <p id="para15"></p>
   <p id="para16"></p>
   <p id="para17"></p>
   <p id="para18"></p>
   
   <script>
      let a = 10, b = 10, c = 20, d = "10";
      
      document.getElementById("para1").innerHTML = a==b;
      document.getElementById("para2").innerHTML = a==c;
      
      document.getElementById("para3").innerHTML = a===b;
      document.getElementById("para4").innerHTML = a===c;
      document.getElementById("para5").innerHTML = a===d;

      document.getElementById("para6").innerHTML = a!=b;
      document.getElementById("para7").innerHTML = a!=c;

      document.getElementById("para8").innerHTML = a!==b;
      document.getElementById("para9").innerHTML = a!==c;
      document.getElementById("para10").innerHTML = a!==d;
      
      document.getElementById("para11").innerHTML = a>b;
      document.getElementById("para12").innerHTML = a>c;

      document.getElementById("para13").innerHTML = a<b;
      document.getElementById("para14").innerHTML = a<c;

      document.getElementById("para15").innerHTML = a>=b;
      document.getElementById("para16").innerHTML = a>=c;

      document.getElementById("para17").innerHTML = a<=b;
      document.getElementById("para18").innerHTML = a<=c;
   </script>
   
</body>
</html>

output:

false

true

true

false

false

false

true

true

false

true

true

Logical operators in JavaScript

Logical operators in JavaScript are used to connect multiple expressions to evaluate and return a boolean value (true or false). For example:

<!DOCTYPE html>
<html>
<body>

   <p>Largest = <span id="xyz"></span></p>
   
   <script>
      var a = 10, b = 20, c = 30, large;
      if(a>b && a>c) {
         large = a;
      }
      else if(b>a && b>c) {
         large = b;
      }
      else {
         large = c;
      }
      document.getElementById("xyz").innerHTML = large;
   </script>
   
</body>
</html>

output:

Largest = 30

List of all logical operators in JavaScript

Logical OR ( || )
Logical AND ( && )
Logical NOT ( ! )

JavaScript logical OR (||) operator

The || operator returns true if any of the expressions evaluate to be true. For example:

<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>
   
   <script>
      var x = 10, y = 12, z = 11, res;
      res = x>y || y>z;
      document.getElementById("abc").innerHTML = res;
   </script>
   
</body>
</html>

Output:

true

In the above example, since the first expression, which is x>y or 10>12, evaluates to be false but the second expression, which is y>z or 12>11, evaluates to be true, therefore true will be initialized to the res variable.

JavaScript logical AND (&&) operator

The && operator returns true if all the expressions evaluate to be true. For example:

<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>
   
   <script>
      var x = 10, y = 12, z = 11, res;
      res = z>x && y>z;
      document.getElementById("myPara").innerHTML = res;
   </script>
   
</body>
</html>

output:

true

JavaScript logical NOT (!) operator

The ! operator reverses the boolean value. For example:

<!DOCTYPE html>
<html>
<body>

   <p id="mp"></p>
   
   <script>
      var x = 10, y = 12, z = 11, res;
      res = !(z>x && y>z);
      document.getElementById("mp").innerHTML = res;
   </script>
   
</body>
</html>

output:

false

Bitwise operators in JavaScript

Bitwise operators in JavaScript are used to perform bitwise (bit-wise or bit-by-bit) operations. For example:

<!DOCTYPE html>
<html>
<body>
   
   <p id="xyz"></p>
   
   <script>
      let x = 6, y = 3;
      document.getElementById("xyz").innerHTML = x & y;
   </script>
   
</body>
</html>

output:

2

List of all Bitwise operators in JavaScript

Bitwise AND (&)
Bitwise OR (|)
Bitwise XOR (^)
Bitwise NOT (˜)
Bitwise Right Shift (>>)
Bitwise Left Shift (<<)
Bitwise Unsigned Right Shift (>>>)

What Is an Operator?

Types of Operators in Javascript

List of all arithmetic operators in JavaScript

Assignment operators in JavaScript

List of all assignment operators in JavaScript

Comparison operators in JavaScript

List of all comparison operators in JavaScript

Logical operators in JavaScript

List of all logical operators in JavaScript

JavaScript logical OR (||) operator

JavaScript logical AND (&&) operator

JavaScript logical NOT (!) operator

Bitwise operators in JavaScript

List of all Bitwise operators in JavaScript

Related Posts

What are custom events in JavaScript?

How to use nested for loop in JavaScript?

What are the basic rules for JavaScript parameters?

How to stop refreshing the page on submit in JavaScript?

Target a Window Using JavaScript or HTML

What is the role of deferred scripts in JavaScript?