JavaScript Operators

Operators are symbols that are used to perform operations on operands. For example, lets look at a simple expression :
  var num = 5 + 10;
At the above expression the + (addition) symbol is used to add two numbers, where Here 5 and 10 are called operands and ‘+’ is called the operator. JavaScript has both binary and unary operators, and one special ternary operator, the conditional operator. A unary operator requires a single operand, either before or after the operator :
  operator operand
Or
  operand operator
For example x++ or ++x.

A binary operator requires two operands, one before the operator and one after the operator:
  operand1 operator operand2
For example 3 + 4, x * y.

JavaScript has the following types of operators :
  • Arithmetic Operators
  • Comparison Operators
  • Logical Operators
  • Assignment Operators
  • Conditional Operators
  • String Operators
  • Type Operators
  • Bitwise Operators

1. Arithmetic Operators :

Arithmetic operators are used to perform arithmetic operations numbers. JavaScript supports the following arithmetic operators :

+ ( Addition ) :  Add two numbers.
 x + y
- ( Subtraction ) : Subtract two numbers. 
 x - y
 * ( Multiplication ) : Multiply two numbers
 x * y
/ ( Division ) : Divide two numbers
 y / x
% ( Modulus ) : Outputs the remainder of an integer division
 y % x
++ ( Increment ) : Increases an integer value by one.
 x++
-- ( Decrement ) : Decreases an integer value by one.
 x--
For example :
<html>
<head>
  <title>Arithmetic Operators</title>
</head>
<body>
  <script type="text/javascript">
    var x = 5, y = 10;
    document.write("Addition ( x + y ) :", x+y);
    document.write("Subtraction ( x - y ) : ", x-y);
    document.write("Multiplication ( x * y ) : ", x*y);
    document.write("Division ( y / x ): ", y/x);
    document.write("Modulus ( y % x ) : ", y%x);
    document.write("Increment ( x++ ) : ", x++);
    document.write("Decrement ( x-- ) : ", x--);
  </script>
</body>
</html>
Output :



2. Comparison Operators :

A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical, string, logical, or object values. JavaScript supports the following comparison operators :

= = (Equal) : Checks if the value of two operands are equal or not, if yes, then the condition becomes true.
  x == y 
!= (Not equal) : Checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true.
  x != y 
< (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.
  x < y 
>= (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.
  x >= y 
<= (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.
  x <= y 
Example :
<html>
<head>
  <title>Comparision Operators</title>
</head>
<body>
  <script type="text/javascript">
    var x = 5, y = 10;
    document.write("Equal ( x == y ) :", x==y);
    document.write("Not Equal ( x != y ) : ", x!=y);
    document.write("Greater than ( x > y ) : ", x>y);
    document.write("Less than ( x < y ): ", y<x);
    document.write("Greater than or Equal to ( x >= y ) : ", x>=y);
    document.write("Less than or Equal to ( x <= y ) : ", x<=y);
  </script>
</body>
</html>
Output :



3. Logical Operators :

JavaScript logical operators return boolean result based on operands. Logical operators are used to determine the logic between variables or values. JavaScript supports the following logical operators :

&& (Logical AND) : If both the operands are non-zero, then the condition becomes true.
  x && y
|| (Logical OR) : If any of the two operands are non-zero, then the condition becomes true.
  x || y
! (Logical NOT) : Reverses the logical state of its operand. If a condition is true, then the Logical NOT operator will make it false.
  x ! y
Example :
<html>
<head>
  <title>Logical Operators</title>
</head>
<body>
  <script type="text/javascript">
    var x = true;
    var y = false;
    document.write("Logical AND ( x && y ) : ", x&&y);
    document.write("Logical OR ( x || y ) : ", x||y);
    document.write("Logical NOT !( x && y ) : ", !(x&&y));
  </script>
</body>
</html>
Output :



4. Assignment Operators :

The assignment operator assign values to its left operand based on the value of its right operand. JavaScript supports the following assignment operators :

= (Simple Assignment ) : Assigns values from the right side operand to the left side operand.
  z = x + y
+= (Add and Assign) : It adds the right operand to the left operand and assigns the result to the left operand.
  x += y 
The above expression is equivalent to x = x + y.

−= (Subtract and Assign) : It subtracts the right operand from the left operand and assigns the result to the left operand.
  x -= y
The above expression is equivalent to x = x - y.

*= (Multiply and Assign) : It multiplies the right operand with the left operand and assigns the result to the left operand.
  x *= y
The above expression is equivalent to x = x * y.

/= (Divide and Assign) : It divides the left operand with the right operand and assigns the result to the left operand.
  x /= y
The above expression is equivalent to x = x / y.

%= (Modules and Assign) : It takes modulus using two operands and assigns the result to the left operand.
  x %= y
The above expression is equivalent to x = x % y.

Example :
<html>
<head>
  <title>Assignment Operators</title>
</head>
<body>
  <script type="text/javascript">
    var x = 5;
    var y = 10;
    var lbrk = "&lt;br /&gt;";
    document.write("x = 5, y = 10");
    document.write(lbrk);
    document.write("Simple Operator (x = y), Now x = ",x);
    document.write(lbrk);
    var x = 5;
    document.write("Add and Assign (x += y) : ", x+=y);
    document.write(lbrk);
    var x = 5;
    document.write("Subtract and Assign (x -= y) : ", x-=y);
    document.write(lbrk);
    var x = 5;
    document.write("Multiply and Assign (x *= y) : ", x*=y);
    document.write(lbrk);
    var x = 5;
    document.write("Divide and Assign (x /= y) : ", x/=y);
    document.write(lbrk);
    var x = 5;
    document.write("Modules and Assign (y %= x) : ", y%=x);
  </script>
</body>
</html>
Output :



5. Conditional Operators

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.
  condition ? value1 : value2
If Condition is true ? Then value X : Otherwise value Y

If condition is true, the operator has the value of val1. Otherwise it has the value of val2. You can use the conditional operator anywhere you would use a standard operator. For example :
  var status = ( age >= 18 ) ? "Adult" : "minor";

6. String Operators

The + operator can also be used to add or concatenate strings, where the the addition operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.
  str = 'John' + 'wick';
Example :
<html>
<head>
  <title>String Operator</title>
</head>
<body>
  <script type="text/javascript">
    var str1 = "This is First String.";
    var str2 = "This is Second String.";
    var mystr = str1 + str2;
    document.write(mystr);
  </script>
</body>
</html>
Output :


In JavaScript we can also add string with number, and the result of this addition will be string. For example :
<html>
<head>
  <title>String Operators</title>
</head>
<body>
  <script type="text/javascript">
    var str = "This is First String. ";
    var x = 200;
    var mystr = str + x;
    document.write(mystr);
  </script>
</body>
</html>
Output :



7. Typeof Operators :

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", or "boolean" if its operand is a number, string, or boolean value and returns true or false based on the evaluation. We can use the typeof operator to find the data type of a JavaScript variable. For example  :
  typeof 12
The above expression returns number.
  typeof true
And it returns the boolean. Here is a list of the return values for the typeof Operator.

Type Returned String
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"


8. Bitwise Operators

Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number. JavaScript bitwise operators evaluate and perform specific bitwise expressions, which are as follows :

& (Bitwise AND) : It performs a Boolean AND operation on each bit of its integer arguments.
  x & y
| (BitWise OR) : It performs a Boolean OR operation on each bit of its integer arguments.
  x | y
^ (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.
  x ^ y
~ (Bitwise Not) : It is a unary operator and operates by reversing all the bits in the operand.
  ~x
<< (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.
  x << 1
>> (Right Shift) : Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand.
  x >> 1
>>> (Right shift with Zero) : This operator is just like the >> operator, except that the bits shifted in on the left are always zero.
  x >>> 1
Example :
<html>
<head>
  <title>Bitwise Operators</title>
</head>
<body>
  <script type="text/javascript">
    var x = 3;
    var y = 4;
    var lbrk = "&lt;br&gt;";
    document.write("x = 3, y= 4");
    document.write(lbrk);
    document.write("( x & y ) : ", x&y);
    document.write(lbrk);
    document.write("( x | y ) : ", x|y);
    document.write(lbrk);
    document.write("( x ^ y ) : ", x^y);
    document.write(lbrk);
    document.write("( ~x ) : ", ~x);
    document.write(lbrk);
    document.write("( x<<1 ) : ", x<<1);
    document.write(lbrk);
    document.write("( x>>1 ) : ", x>>1);
    document.write(lbrk);
    document.write("( x>>>1 ) : ", x>>>1);
  </script>
</body>
</html>
Output :



Next Topic :