HtmlCssMonk

Operators in JavaScript | Learn basic JavaScript

work, typing, computer

DESCRIPTION

What is an Operator ?

Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript supports the following types of operators –

  • Arithmetic Operators
  • Comparison Operators
  • Logical (or Relational) Operators
  • Assignment Operators
  • Bitwise Operators

Let’s take a look at them one by one.

Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are known as JavaScript arithmetic operators.

OperatorDescriptionExample
+Addition10+20 = 30
Subtraction20-10 = 10
*Multiplication10*20 = 200
/Division20/10 = 2
%Modulus (Remainder)20%10 = 0
++Incrementvar a=10; a++; Now a = 11
Decrementvar a=10; a–; Now a = 9

EXAMPLE –

<html>
   <body>
   
      <script type = "text/javascript">
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br />";
         
            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);
         
            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);
         
            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
      </script>
  
   </body>
</html>

This Code will produce the following result on your webpage –


Comparison Operators

The JavaScript comparison operator compares the two operands. The comparison operators are as follows –

OperatorDescriptionExample
==Is equal to10==20 = false
===Identical (equal and of same type)10==20 = false
!=Not equal to10!=20 = true
!==Not Identical20!==20 = false
>Greater than20>10 = true
>=Greater than or equal to20>=10 = true
<Less than20<10 = false
<=Less than or equal to20<=10 = false

EXAMPLE –

<html>
<body>
  <script type="text/javascript">
    var a = 10;
    var b = 20;
    var linebreak = "<br />";

    document.write("(a == b) => ");
    result = (a == b);
    document.write(result);
    document.write(linebreak);

    document.write("(a < b) => ");
    result = (a < b);
    document.write(result);
    document.write(linebreak);

    document.write("(a != b) => ");
    result = (a != b);
    document.write(result);
    document.write(linebreak);

    document.write("(a >= b) => ");
    result = (a >= b);
    document.write(result);
    document.write(linebreak);

  </script>
</body>
</html>

This Code will produce the following result on your webpage –


Logical Operator

JavaScript supports the following logical operators

OperatorDescriptionExample
&&Logical AND(10==20 && 20==33) = false
||Logical OR(10==20 || 20==33) = false
!Logical Not!(10==20) = true

EXAMPLE –

<html>

<body>
  <script type="text/javascript">
     var a = true;
    var b = false;
    var linebreak = "<br />";

    document.write("(a && b) => ");
    result = (a && b);
    document.write(result);
    document.write(linebreak);

    document.write("(a || b) => ");
    result = (a || b);
    document.write(result);
    document.write(linebreak);

    document.write("!(a && b) => ");
    result = (!(a && b));
    document.write(result);
    document.write(linebreak);
  </script>
</body>

</html>

This Code will produce the following result on your webpage –


Assignment Operators

Following are JavaScript assignment operators

OperatorDescriptionExample
=Assign10+10 = 20
+=Add and assignvar a=10; a+=20; Now a = 30
-=Subtract and assignvar a=20; a-=10; Now a = 10
*=Multiply and assignvar a=10; a*=20; Now a = 200
/=Divide and assignvar a=10; a/=2; Now a = 5
%=Modulus and assignvar a=10; a%=2; Now a = 0

EXAMPLE –

<html>

<body>
  <script type="text/javascript">
    var a = 33;
    var b = 10;
    var linebreak = "<br />";

    document.write("Value of a => (a = b) => ");
    result = (a = b);
    document.write(result);
    document.write(linebreak);

    document.write("Value of a => (a += b) => ");
    result = (a += b);
    document.write(result);
    document.write(linebreak);

    document.write("Value of a => (a -= b) => ");
    result = (a -= b);
    document.write(result);
    document.write(linebreak);

    document.write("Value of a => (a *= b) => ");
    result = (a *= b);
    document.write(result);
    document.write(linebreak);
  </script>
</body>

</html>

This Code will produce the following result on your webpage –


Bitwise Operators

JavaScript supports the following Bitwise operators

OperatorDescriptionExample
&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

Example –

<html>

<body>
  <script type="text/javascript">
    var a = 2; 
    var b = 3; 
    var linebreak = "<br />";

    document.write("(a & b) => ");
    result = (a & b);
    document.write(result);
    document.write(linebreak);

    document.write("(a | b) => ");
    result = (a | b);
    document.write(result);
    document.write(linebreak);

    document.write("(a << b) => ");
    result = (a << b);
    document.write(result);
    document.write(linebreak);

    document.write("(a >> b) => ");
    result = (a >> b);
    document.write(result);
    document.write(linebreak);
  </script>
</body>

</html>

This Code will produce the following result on your webpage –


Next topic – If statement in JS

Previous topic – Output in JS


Leave a Comment

Your email address will not be published. Required fields are marked *