We now have a youtube channel. Subscribe!
Home
Javascript

JavaScript Operators


Hello guys! evening and welcome to this tutorial post on javascript. In my last tutorial post i talked about Javascript Variable, now we are going to look into a new and superb topic.

In this tutorial post we are going to be talking about Javascript Operator.

What is an Operator?

Let us take a very simple expression 4 + 2 is equal to 6. Here 4 and 2 are called operands and '+' is called the operator. Javascript supports the following types of operators.

  • Arithmetic Operators
  • Comparison Operators
  • Logical Operators
  • Assignment Operators
  • Conditional Operators
You can also check out our tutorial post on How to enable JavaScript

Let's go into all of the above mentioned operators one by one.

Arithmetic Operators

Javascript supports the following arithmetic operators.
Assume variable A holds 10 and variable B holds 20 then:

Sr.No.Operator & Description
1
+ (Addition)
Adds two operands
Ex: A + B will give 30
2
- (Subtraction)
Subtracts the second operand from the first
Ex: A - B will give -10
3
* (Multiplication)
Multiply both operands
Ex: A * B will give 200
4
/ (Division)
Divide the numerator by the denominator
Ex: B / A will give 2
5
% (Modulus)
Outputs the remainder of an integer division
Ex: B % A will give 0
6
++ (Increment)
Increases an integer value by one
Ex: A++ will give 11
7
-- (Decrement)
Decreases an integer value by one
Ex: A-- will give 9
Note: Addition operator works for Numeric as well as Strings e.g. "b" + 20 will give "b20".

Example

Let's take a look at a brief example below so you can understand better what we have been talking about.
Note: In the you can assign any value to any of the variables while practicing, it's not compulsory to use exact same values used in the below example.

The following code below shows how to implement arithmetic operators in Javascript:

<html>
     <body>
          < script  type=" text/javascript ">
               <!--
                    var  a = 33;
                    var  b = 10;
                    var  c = " Kennedy ";
                    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 + 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>

Like I said before the above example, you can assign different values while practicing, just choose values that suites you best.

The above example will give you the output below:

a + b = 43
a  - b = 23
a /  b = 3.3
a % b =  3
a + b + c = 43kennedy
++a = 35
--b = 8

You can check out this wonderful tutorial on how to add Javascript to Html

Comparison Operators

Javascript support the following comparison operators below:
We are still going to make use of the same values used in the previous example.

Assume variable A holds 10 and variable B holds 20 then:

Sr.No.Operator & Description
1
= = (Equal)
Checks if the value of two operands are equal or not, if yes, then the condition becomes true.
Ex: (A == B) is not true.
2
!= (Not Equal)
Checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true.
Ex: (A != B) is true.
3
> (Greater than)
Checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true.
Ex: (A > B) is not true.
4
< (Less than)
Checks if the value of the left operand is less than the value of the right operand, if yes, then the condition becomes true.
Ex: (A < B) is true.
5
>= (Greater than or Equal to)
Checks if 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.
Ex: (A >= B) is not true.
6
<= (Less than or Equal to)
Checks if 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.
Ex: (A <= B) is true.
This blog covers tutorials only on web design courses but if you have interest on C programming courses, you can check out this link which will take you directly to the full tutorial package: C Programming

Back to the topic on ground, let's take a look at a short and very simple example on Comparison Operators.

Example

The following code below shows how to implement Comparison Operators in Javascript.

<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);

                    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>

The above code will give you the output below:

(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
(a <= b) => true

For better understanding, try and practice while reading using your Notepad++ text editor and feel free to ask your questions in areas you don't understand properly.

You can also read our tutorial post on: Grouping Content

Logical Operators

JavaScript supports the following logical operators below:

Assume variable A holds 10 and variable B holds 20 then:

Sr.No.Operator & Description
1
&& (Logical AND)
If both the operands are non-zero, then the condition becomes true.
Ex: (A && B) is true.
2
|| (Logical OR)
If any of the two operands are non-zero, then the condition becomes true.
Ex: (A || B) is true.
3
! (Logical NOT)
Reverses the logical state of its operand. If a condition is true, then the Logical NOT operator will make it false.
Ex: ! (A && B) is false.

Example

You can try the following code below in other to learn how to implement Logical operators in javascript.

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

The above code will give you the output below:

(a && b) => false
(a || b) => true
!(a && b) => true

For those interested in machine learning, you can use the link to get full access to the resource.

Bitwise Operators

Javascript supports the following bitwise operators below:

Assume variable A holds 2 and variable B holds 3, then:

Sr.No.Operator & Description
1
& (Bitwise AND)
It performs a Boolean AND operation on each bit of its integer arguments.
Ex: (A & B) is 2.
2
| (BitWise OR)
It performs a Boolean OR operation on each bit of its integer arguments.
Ex: (A | B) is 3.
3
^ (Bitwise XOR)
It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both.
Ex: (A ^ B) is 1.
4
~ (Bitwise Not)
It is a unary operator and operates by reversing all the bits in the operand.
Ex: (~B) is -4.
5
<< (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 left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.
Ex: (A << 1) is 4.
6
>> (Right Shift)
Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand.
Ex: (A >> 1) is 1.
7
>>> (Right shift with Zero)
This operator is just like the >> operator, except that the bits shifted in on the left are always zero.
Ex: (A >>> 1) is 1.

Example

You can try the following code below in other to learn how to implement bitwise operators into javascript.

<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("(~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);

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

The above code will give you the output below:

(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0

You can try the above example out for better understanding, you can use any value of your choice while trying out the example.

You can check out our tutorial post on what is JavaScript

Assignment Operators

JavaScript supports the following assignment operators below:

Sr.No.Operator & Description
1
= (Simple Assignment )
Assigns values from the right side operand to the left side operand
Ex: C = A + B will assign the value of A + B into C
2
+= (Add and Assignment)
It adds the right operand to the left operand and assigns the result to the left operand.
Ex: C += A is equivalent to C = C + A
3
−= (Subtract and Assignment)
It subtracts the right operand from the left operand and assigns the result to the left operand.
Ex: C -= A is equivalent to C = C - A
4
*= (Multiply and Assignment)
It multiplies the right operand with the left operand and assigns the result to the left operand.
Ex: C *= A is equivalent to C = C * A
5
/= (Divide and Assignment)
It divides the left operand with the right operand and assigns the result to the left operand.
Ex: C /= A is equivalent to C = C / A
6
%= (Modules and Assignment)
It takes modulus using two operands and assigns the result to the left operand.
Ex: C %= A is equivalent to C = C % A
Note: Same logic applies to bitwise operators so they will become like <<=, >>=, &=, |= and ^=.

Example

You can try the following code below in other to learn how to implement assignment operator in Javascript.

<html>
     <body>
          <script  type="text/JavaScript">
               <!--
                    var a = 33;
                    var b = 10;
                    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>

The above code will give you the output below:

(a = b) => 10
(a += b) => 20
(a -= b) => 10
(a *= b) => 100
(a /= b) => 10
(a %= b) => 0

Conditional Operator (? :)
The conditional operator (? :) first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation.

Sr.No.Operator and Description
1
? : (Conditional )
If Condition is true? Then value X : Otherwise value Y
Example
You can try the following code below to understand better how conditional operator works in Javascript.

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

                    document.write("((a > b) ? 100 : 200) =>  ");
                    result(a > b) ? 100 : 200;
                    document.write(result);
                    document.write(linebreak);

                    document.write("((a < b) ? 100 : 200) =>  ");
                    result(a < b) ? 100 : 200;
                    document.write(result);
                    document.write(linebreak);

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

Below is the output of the above code:

((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100

Get full access to mobile android app development resource by using the link.

Note: The link above takes you to an external website, so only use the link if you actually interested in learning android mobile app development.

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

The typeof operator evaluates to "number", "string", "boolean" if its operand is a number, string or boolean value and returns true or false based on evaluation.

Below is a list of return values for the typeof operator:

TypeString Returned by typeof
Number"number"
String"string"
Boolean"boolean"
Object"object"
Function"function"
Undefined"undefined"
Null"object"
Example
The following code below shows how to implement typeof operator:

<html>
     <body>
          <script  type="text/JavaScript">
               <!--
                    var a = 10;
                    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");
                    document.write("Result =>  ");
                    document.write(result);
                    document.write(linebreak);

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

Below is the output of the above code: 

Result  => B is String
Result  => A is Numeric

You can try out the above code for better understanding.

Alright guys, we have come to the end of this tutorial on JavaScript Operators, in our next tutorial we will be talking about JavaScript if....else Statement. Feel free to ask your questions through the comment box, they will attended to as soon as possible.

You can also follow us on our various social media pages to stay updated.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain