Types of Operators in JavaScript

Javascript operators; In this tutorial, you will learn how many types of operators in javascript and how to use javascript operators with examples.

Types of Operators in JavaScript with Example

How many types of operators in javascript:

  • Arithmetic Operators
  • Comparison Operators
  • Logical Operators
  • Assignment Operators
  • Conditional Operators

Arithmetic Operators

Arithmetic operators are used to performing mathematical operations between numeric operands.

OperatorDescription
+Adds two numeric operands.
Subtract right operand from left operand
*Multiply two numeric operands.
/Divide left operand by right operand.
%Modulus operator. Returns remainder of two operands.
++Increment operator. Increase operand value by one.
Decrement operator. Decrease value by one.

Example- JavaScript Arithmetic Operator

The following example demonstrates how arithmetic operators perform different tasks on operands.

<html>

   <head>
     <title> JavaScript Arithmetic Operator Examples</title>
   </head>

   <body>

      <script>

            var x = 5;
            var y = 50;
            var z = 100;
            var newline = "<br />";

            document.write("x + y ===output===> ");
            output = x + y;
            document.write(output);
            document.write(newline);

            document.write("x - y ===output===> ");
            output = x - y;
            document.write(output);
            document.write(newline);

            document.write("x / y ===output===> ");
            output = x / y;
            document.write(output);
            document.write(newline);

            document.write("x % y ===output===> ");
            output = x % y;
            document.write(output);
            document.write(newline);

            document.write("x + y + z ===output===> ");
            output = x + y + z;
            document.write(output);
            document.write(newline);

            x = ++x;
            document.write("++x ===output===> ");
            output = ++x;
            document.write(output);
            document.write(newline);

            y = --y;
            document.write("--y ===output===> ");
            output = --y;
            document.write(output);
            document.write(newline);

      </script>

   </body>

</html>

Output:

x + y = 55
x - y = -45
x / y = 0.1
x % y = 5
x + y + z = 155
++x = 7
--y = 48 

Note

+ operator performs concatenation operation when one of the operands is contained a string value.

Here, an example shows how + operator performs an operation on operands of different data types.

var a = 50, b = "Hello ", c = 15;

a + b; // "5Hello "

a + c; // 65

Comparison Operators

JavaScript comparison operators compare two operands value and return the Boolean value true or false.

OperatorsDescription
==Compares the equality of two operands without considering type.
===Compares equality of two operands with type.
!=Compares inequality of two operands.
>Checks whether left side value is greater than right side value. If yes then returns true otherwise false.
<Checks whether left operand is less than right operand. If yes then returns true otherwise false.
>=Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false.
<=Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.

Example – JavaScript Comparison Operators

The following example demonstrates how comparison operators perform different tasks.

<html>

   <head>
    <title> JavaScript Comparison Operator Examples</title>
   </head>

   <body>

      <script type = "text/javascript">

            var x = 50;
            var y = 100;
            var breakLine = "<br />";

            document.write("(x == y) ===output===> ");
            output = (x == y);
            document.write(output);
            document.write(breakLine);

            document.write("(x < y) ===output===> ");
            output = (x < y);
            document.write(output);
            document.write(breakLine);

            document.write("(x > y) ===output===> ");
            output = (x > y);
            document.write(output);
            document.write(breakLine);

            document.write("(x != y) ===output===> ");
            output = (x != y);
            document.write(output);
            document.write(breakLine);

            document.write("(x >= y) ===output===> ");
            output = (x >= y);
            document.write(output);
            document.write(breakLine);

            document.write("(x <= y) ===output===> ");
            output = (x <= y);
            document.write(output);
            document.write(breakLine);

      </script>

   </body>

</html>

Output

(x == y) ===output===> false
(x < y) ===output===> true
(x > y) ===output===> false
(x != y) ===output===> true
(x >= y) ===output===> false
(x <= y) ===output===> true 

Logical Operators

Logical operators are used to combine two or more conditions. JavaScript includes the following logical operators.

OperatorDescription
&&&& is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or “” are considered as zero), if yes then returns 1 otherwise 0.
|||| is known as OR operator. It checks whether any one of the two operands is non-zero (0, false, undefined, null or “” is considered as zero).
!! is known as NOT operator. It reverses the boolean result of the operand (or condition)

Example – JavaScript Logical Operators

<html>

   <head>
    <title> JavaScript Logical Operator Examples</title>
   </head>

   <body>

      <script type = "text/javascript">

            var x = 50;
            var y = 100;
            var breakLine = "<br />";


            document.write("(x && y) ===output===> ");
            output = (x && y);
            document.write(output);
            document.write(breakLine);

            document.write("(x || y) ===output===> ");
            output = (x || y);
            document.write(output);
            document.write(breakLine);

            document.write("!(x && y) ===output===> ");
            output = (!(x && y));
            document.write(output);
            document.write(breakLine);

      </script>

   </body>

</html>

Output

(x && y) ===output===> 100
(x || y) ===output===> 50
!(x && y) ===output===> false 

Assignment Operators

JavaScript includes assignment operators to assign values to variables with fewer keystrokes.

Assignment operatorsDescription
=Assigns right operand value to left operand.
+=Sums up left and right operand values and assign the result to the left operand.
-=Subtract right operand value from left operand value and assign the result to the left operand.
*=Multiply left and right operand values and assign the result to the left operand.
/=Divide left operand value by right operand value and assign the result to the left operand.
%=Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.

Example – Assignment operators

<html>

   <head>
    <title> JavaScript Assignment Operator Examples</title>
   </head>

   <body>

      <script type = "text/javascript">

            var x = 50;
            var y = 100;
            var breakLine = "<br />";


            document.write("Value of a ===output===> (x = y) ===output===> ");
            output = (x = y);
            document.write(output);
            document.write(breakLine);

            document.write("Value of a ===output===> (x += y) ===output===> ");
            output = (x += y);
            document.write(output);
            document.write(breakLine);

            document.write("Value of a ===output===> (x -= y) ===output===> ");
            output = (x -= y);
            document.write(output);
            document.write(breakLine);

            document.write("Value of a ===output===> (x *= y) ===output===> ");
            output = (x *= y);
            document.write(output);
            document.write(breakLine);

            document.write("Value of a ===output===> (x /= y) ===output===> ");
            output = (x /= y);
            document.write(output);
            document.write(breakLine);

            document.write("Value of a ===output===> (x %= y) ===output===> ");
            output = (x %= y);
            document.write(output);
            document.write(breakLine);

      </script>

   </body>

</html>

Output

Value of a ===output===> (x = y) ===output===> 100
Value of a ===output===> (x += y) ===output===> 200
Value of a ===output===> (x -= y) ===output===> 100
Value of a ===output===> (x *= y) ===output===> 10000
Value of a ===output===> (x /= y) ===output===> 100
Value of a ===output===> (x %= y) ===output===> 0 

Ternary Operator

Does JavaScript include a special operator called ternary operator:? that assigns a value to a variable based on some condition. This is like a short form of the if-else condition.

In other words, The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if-else statement.

Syntax:

<condition> ? <value1> : <value2>;

Does the ternary operator start with conditional expression followed by? operator. The second part ( after ? and before: operator) will be executed if the condition turns out to be true. If the condition becomes false then the third part (after 🙂 will be executed.

Example – JavaScript Ternary operator

var a = 10, b = 5;

var c = a > b? a : b; // value of c would be 10
var d = a > b? b : a; // value of d would be 5

Conclusion

In this tutorial, you have learned javascript operators with examples.

Recommended JavaScript Tutorials

Recommended:-JavaScript Arrays

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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