8 JavaScript Operators With Example – Learn How to Use Them

JavaScript operators are similar to operators we saw in other programming languages. Operators are the symbol, which is used to perform many operations (mathematical and logical computation) like addition, subtraction, multiplication etc.

This JavaScript operator tutorial designed to learn different types of operators with example and their implementation process.

Types of Operators in JavaScript with examples

Types of JavaScript Operators

Let us take a simple example 4 + 5 equals to 9. Here, 4 and 5 are operands and ‘+’ is the operator.

Following are different types of JavaScript Operators:

  1. Arithmetic Operators
  2. Comparison Operators
  3. Logical or (Relational) Operators
  4. Bitwise Operators
  5. Assignment Operators
  6. String Operators
  7. Unary Operators
  8. Miscellaneous Operators

Do you know 8 Unique Features of JavaScript?

1. JavaScript Arithmetic Operators

JavaScript supports arithmetic operators. Assume a variable A contains 100 and variable B contains 200 then.

a. + (Addition)

Adds two operands

Example – A+B will give 300.

b. – ( Subtraction)

Subtracts two operands.

Example – A-B will give -100.

c. * (Multiplication)

Multiplies both the operands.

A*B = 2000.

d. / (Division)

Divide the numerator by the denominator.

Example – B/A will give 2.

e. % (Modulus)

Output the remainder of an integer division.

Example – B%A will give 0.

f. ++(Increment)

Increases an integer value by one.

Example – A+5 will give 105.

g. – – (Decrement)

Decreases an integer value by one.

Example – A—will give 99.

Example of Arithmetic Operators in JavaScript

The following example shows how to use Arithmetic Operators in JavaScript

<html>
<body>
  <script type = “text/javascript”>
    <! –
          var a = 20;
          var b = 40;
          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);

        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+ c” = “);
          result = a + b + c;
          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>

Recommended Reading – Different types of JavaScript Loops with Example

Output-

a + b = 60

a – b = 20

a * b = 800

a / b = 0.5

a % b = 0

a + b + c = 40 test

++a = 22

–a = 18

2. JavaScript Comparison Operators

JavaScript supports the following comparision operators. Assume variable A contains 10 and variable B contains 20 then:

a. == (Equals)

It checks whether the value of two operands are equal or not, if yes, then condition becomes true.

Example- (A == B) is not true

b. ! = (Not Equals)

It checks whether the value of two operands are equal or not. If they don’t happen to be equal then the condition becomes true.

c. > (Greater Than)

It checks whether the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true.

Example- (A > B) is not true.

d. < ( less than)

Checks if the value of the left operand is less than the value of the right operand, if yes, the condition becomes true.

Example- ( A < B ) is true.

e. > = ( Greater than or Equal to)

It checks whether the value of the left operand is greater than or equal to the value of the right operand, if yes, then the condition becomes true.

Example- (A > = B) is not true.

f. < = ( less than or equal to)

It checks whether the value of the left operand is less than or equal to the value of the right operand, if yes, then the condition becomes true.

Have a LookJavaScript Switch Case with Example

Example of Comparison Operators in JavaScript

The following code shows how to use comparison operators in JavaScript.

<html>
  <body>
    <script type = “text/javascript”>
       < ! -- >
            var a = 50;
            var b = 60;
            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);

            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>

Output-

(a == b) => false

(a < b) => true

(a> b) => false

(a! = b) => true

(a>= b) => false

(a< = b) => true

3. JavaScript Logical Operators

JavaScript supports the following Logical Operators. Assume the variable A holds 10 and variable B holds 20 then,

a. && ( Logical AND)

If both the operands are non- zero number, then the condition becomes true.

Example- (A && B) is true.

b. || ( Logical OR)

If anyone of the two operands is non –zero, then the condition becomes true.

Example- ( A || B) is true.

c. ! ( Logical NOT)

Reverses the logical states of its operands. If the condition is true then the logical NOT operator makes it as false.

Example- ! ( A && B) is false.

Also See – JavaScript Loop Control (break & Continue Statement)

Example of Logical Operators in JavaScript

The following code implements the logical operators in JavaScript:

<html>
<body>
<script type = “text/javascript”>
     <! –
           var a = true;
           var b = false;
           var line break = “<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>

4. JavaScript Bitwise Operators

JavaScript supports the following bitwise operators. Assume the variable A holds 2 and variable B holds 3, then:

a. & (Bitwise AND)

It performs Boolean AND operation on each bit of integer argument.

Example- (A & B) = 2.

b. |( Bitwise OR)

It performs Boolean OR operation on each bit of the integer argument.

Example- (A| B) = 3.

c. ^ ( Bitwise XOR)

It performs Boolean Exclusive OR operation on each bit of its integer arguments. In Exclusive OR, either operand one is true or operand two is true but not both.

Example- (A ^ B) is 1.

d. ~ ( Bitwise NOT)

Negation is a bitwise operator and operates by reversing all the bits in the operand.

Example- (~ B) is -4.

e. << ( left shift)

It moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value by left by one position is equivalent to multiplying it by 2. Shifting two positions is equivalent to multiplying by 4 and so on.

Example- ( A << 1) is 4.

f. >>(Right Shift)

Binary right shift operator and in that the left operand’s value is moved right by the number of bits specified by the right operand.

Example- (A>> 1) is 1.

g. >>> (Right shift with zero)

This operator is just like >> operator, except that the bits are shifted on left are always zero.

Example- ( A >>>1) is 1.

Do you know how to declare, name and initialize the Variable in JavaScript?

Example of Bitwise Operators in JavaScript

The following code try to implement bitwise operator in JavaScript

<html>
<body>
    <script type = “text/javascript”>
      < ! –
          var a = 4; // bit representation of 100
          var b = 5; // bit representation of 101
          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(“ ( ~b) => “);
           result = (~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>

Output-

(a&b) => 4

(a | b) => 5

(a^ b) = > 20

(~b) = > 4

(a<< b) = > 64

(a>>b) = > 0

5. JavaScript Assignment Operators

a. = (Simple Assignment)

Assign values from right operand to the left side operand.

Example- C = A+B will assign the value of A+ B into C.

b. + =( Add and Assignment)

It can add the left operand and right operand and assign the result value to the left operand.

Example- C+ = A is equivalent to C= C+ A.

c. -=( Subtract and Assignment)

The Subtract and Assignment operator subtracts the right operand from the left operand and assigns the result to the left operand.

Example- C- = A is equivalent to C=C- A.

d. *= ( Multiply and Assignment)

The Multiply and Assignment operator multiplies the right operand with the left operand and assigns the result to the left operand.

Example- C*= A is equivalent to C= C*A.

e. / =( Divide and Assignment)

It divides the left operand with the right operand and assigns the result to the left operand.

Example- C/= A is equivalent to C = C/A.

f. % = (Modulus and Assignment

Modulus and Assignment operator takes modulus using two operands and assigns the result to the left operand.

Example- C%= A

Follow this link to revise JavaScript Object – Methods and Prototypes

Example of Assignment Operators in JavaScript

The following code implements assignments operator

<html>
<body>
  <script type = “text/javascript”;
     <!—
       var a = 25;
       var b = 25;
       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);

       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>

Output-

Value of a => (a = b) => 25

Value of a => (a += b) => 50

Value of a => (a-= b) => 0

Value of a => (a*=b) => 625

Value of a => (a/= b) => 0

Value of a => (a % b) = 0

6. JavaScript Unary Operators

a. Typeof Operator

It is a unary operator that is placed before its single operand, which can be of any type. Its value is the string indicating the value of data type of the operand.

The typeof operator returns six possible values “number”, “strings”, “Boolean”, “object”, “function”, “undefined”, “null” and returns true or false based on the evaluation.

Also, refer – What are the features of JavaScript Class?

Example-

The following code implements typeof operators :

<html>
<body>
   <script type = “text/javascript”>
      <! –
           var a = 20;
           var b = “string”;
           var linebreak = “<br/>”;
           result =( typeof b == “string”? “B is string “: “ B is numeric”);
     document.write (“result => “);
     document.write(result);
     document.write(linebreak);

     result =(typeof a == “string “? “A is string” ; “A is numeric”);

Output-

Result =>B is string

Result => A is numeric

b. Delete Operators

JavaScript delete operator deletes object property or remove a specific element in an array. If delete is not allow ( you can’t delete if element not exists, array element-undefined etc) then returns false otherwise.

Example- 

delete expression; // delete explicit declare variable
delete object; //delete
delete object.property;
delete object [ Property];
delete array;// delete array
delete array[index]; //delete array

Example- 

var address = “63 Street ct.”;
delete address; //returns false, using var keyword you can’t delete.
add = ’63 Street ct.”;
delete add; // returns true, explicit declare you can delete

var myObj = new Object();
myObj.name == “Steve”;
myObj.age = 48;
myObj.married = true;
delete myObj.name;
delete myObj[“count”];
var experience = [1992,1993, 1994, 1995, 1996];
delete experience[2];
console.log [experience];

Output-

address : false

Add: true

myObj.name : true

myObj[“count”]: true

experience[2]: true

experience: 1992, 1993, 1994, 1995, 1996

7. JavaScript String Operator

It can use to add strings.

Example-

var txt1 = “John”;
var txt2 = “Doe”;
var txt3= txt + “ “ +txt2;

The result of txt3 will be John Doe.

The += assignment operator can be used to add (concatenate) strings.

Example-

var txt1 = “what a very”;
txt1+ = “Nice day”;

The result of txt1 will be:

What a very nice day.

8. JavaScript Miscellaneous Operators

a. Conditional Operator( ?:)

The conditional operator just evaluates an expression for a true or false and then executes one of the two given statements depending upon the result of the evaluation.

Example – ? : (Conditional)

If the condition is true? then value x: otherwise, value y.

The following code implements how conditional operators work in JavaScript

<html>
<body>
  <script type = “text.javascript”>
         <! –
           var a = 60;
           var b = 70;
           var linebreak = “<br/>”;

           document.write( “( a > b) ? 60:70) =>”);
            result = (a> b)? 60: 70;
           document.write(result);
           document.write(linebreak);

           document.write( “( a < b) ? 60:70) =>”);
            result = (a< b)? 60: 70;
           document.write(result);
           document.write(linebreak);

Output-

((a> b)? 60:70 => 70
((a<b)? 60:70 =>60

How to Add Strings and Number in JavaScript?

Addition of two numbers will return the sum, but adding a number and a string will return a string.

Example-

var x = 10 +10;
var y = “10” + 10;
var z = “Hello” + 10;

The result of x, y and z will give:

20

10

Hello 10

Summary

In this article, we have seen operators used to apply mathematical and comparison (logical) operation. Here, we studied different types of operators in JavaScript with their examples. In addition, we covered how to implement all those operators. You may also like to explore top books for JavaScript.

Is this tutorial helpful? Tell us through comments.

Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.