JavaScript Operators with Example

JavaScript Operators use either value or variable to compute some task. This lesson describes the JavaScript operators with example, and operators precedence. JavaScript has following types operators,

  1. Arithmetic Operators
  2. Assignment Operators
  3. Comparison Operators
  4. Logical Operators
  5. Conditional Operator (Ternary Operator)
  6. Bitwise Operators
  7. Miscellaneous Operators
    1. typeof
    2. delete
    3. instanceof
    4. new
    5. this
    6. in

JavaScript Operators with Example

JavaScript Arithmetic Operators

JavaScript arithmetic operator take operand (as a values or variable) and return the single value.

We are use in our routine life arithmetic operators, addition(+), subtraction(-), multiplication (*), and division (/) and some other arithmetic operator are listed below.

We have numeric variable: x = 10, y = 5 and result.

Operator Description Example Results
+ Addition result = x + y result = 15
- Subtraction result = x - y result = 5
* Multiplication result = x * y result = 50
/ Division result = x / y result = 2
% Modulus result = x % y result = 0
++ Increment result = x++
result = x
result = ++x
result = 10
result = 11
result = 12
-- Decrement result = x--
result = x
result = --x
result = 12
result = 11
result = 10
<script>
    var x = 10, y = 5;
    document.writeln(x + y);        //  Addition: 15
    document.writeln(x - y);        //  Subtraction: 5
    document.writeln(x * y);        //  Multiplication: 50
    document.writeln(x / y);        //  Division: 2
    document.writeln(x % y);        //  Modulus: 0

    document.writeln(x++);          //  x: 10, x become now 11
    document.writeln(x);            //  x: 11
    document.writeln(++x);          //  x become now 12, x: 12

    document.writeln(x--);          //  x: 12, x become now 11
    document.writeln(x);            //  x: 11
    document.writeln(--x);          //  x become now 10, x: 10
</script>

Run it...   »

JavaScript Assignment Operators

JavaScript assignment operators assign values to left operand based on right operand. equal (=) operators is used to assign a values.

We have numeric variable: x = 10, y = 5 and result.

Operator Sign Description Example Equivalent to Results
Assignment = Assign value from one operand to another operand value. result = x result = x result = 17
Addition += Addition of operands and finally assign to left operand. result += x result = result + y result = 22
Subtraction -= Subtraction of operands and finally assign to left operand. result -= y result = result - y result = 17
Multiplication *= Multiplication of operands and finally assign to left operand. result *= y result = result * y result = 85
Division /= Division of operands and finally assign to left operand. result /= y result = result / y result = 17
Modulus %= Modulus of operands and finally assign to left operand. result %= y result = result % y result = 2
Bitwise AND &= AND operator compare two bits values return a results of 1, If both bits are 1. otherwise return 0. result &= y result = result & y
= 2 & 5
= 0000 0010 & 0000 0101
= 0000 0000 = 0
result = 0
Bitwise OR |= OR operator compare two bits values and return result of 1, If the bits are complementary. Otherwise return 0. result |= y result = result | y
= 2 | 5
= 0000 0010 | 0000 0101
= 0000 0111 = 7
result = 7
Bitwise XOR ^= EXCLUSIVE OR operator compare two bits values and return a results of 1, If any one bits are 1 or either both bits one. result ^= y result = result ^ y
= 7 ^ 5
= 0000 0111 ^ 0000 0101
= 0000 0010 = 2
result = 2
Shift Left <<= Shift left operator move the bits to a left side. result <<= y result = result <<= y
= 2 <<= 5
= 0000 0010 <<= 0100 0000
= 64
result = 64
Shift Right >>= Shift left operator move the bits to a left side. result >>= y result = result >>= y
= 2 >>= 5
= 0100 0000 >>= 0000 0010
= 2
result = 2
<script>
    var x = 17, y = 5;
    var result = x; // Assignment to left operand(result) base on right operand(y).
    document.writeln(result);
    document.writeln(result += x);
    document.writeln(result -= y);
    document.writeln(result *= y);
    document.writeln(result /= y);
    document.writeln(result %= y);

    document.writeln(result &= y);
    result = 2;     // Reassign value 
    document.writeln(result |= y);
    document.writeln(result ^= y);

    document.writeln(result <<= y);
    document.writeln(result >>= y);
</script>

Run it...   »

JavaScript Comparison Operators

JavaScript comparison operator determine the two operands satisfied the given condition. Comparison operator return either true or false.

Operator Sign Description
Equal == If both operands are equal, returns true.
Identical equal === If both operands are equal and/or same data type, returns true.
Not equal != If both operands are not equal, returns true.
Identical not equal !== If both operands are not equal and/or same data type, returns true.
Greater than > If left operand larger than right operand, return true.
Less then < If left operand smaller than right operand, return true.
Greater than, equal >= If left operand larger or equal than right operand, return true.
Less than, equal <= If left operand smaller or equal than right operand, return true.
<script>
    document.writeln(5 == 5);       // true
    document.writeln(5 == '5');   // true
    document.writeln(5 === '5');  // false type not same

    document.writeln(5 != 10);      // true
    document.writeln(5 != '10');  // true
    document.writeln(5 !== '10'); // true

    document.writeln(5 > 10);       // false
    document.writeln(5 < 10);       // true

    document.writeln(5 >= 5);       // true
    document.writeln(5 <= 5);       // true
</script>

Run it...   »

JavaScript Logical Operators (Boolean Operators)

JavaScript logical operators return boolean result base on operands.

Operator Sign Description
Logical AND && If first operand evaluate and return a true, only that evaluate the second operand otherwise skips.
Return true if both are must be true, otherwise return false.
Logical OR || Evaluate both operands,
Return true if either both or any one operand true,
Return false if both are false.
Logical NOT ! Return the inverse of the given value result true become false, and false become true.
<script>
    document.writeln((5 == 5) && (10 == 10));   // true
    document.writeln(true && false);            // false

    document.writeln((5 == 5) || (5 == 10));    // true
    document.writeln(true || false);            // true

    document.writeln(5 && 10);                  // return 10
    document.writeln(5 || 10);                  // return 5

    document.writeln(!5);                       // return false
    document.writeln(!true);                    // return false
    document.writeln(!false);                   // return true
</script>

Run it...   »

JavaScript Conditional Operator (also call Ternary Operator)

JavaScript conditional operator evaluate the first expression(operand), Base on expression result return either second operand or third operand.

answer = expression ? answer1 : answer2;       // condition ? true : false

Example

document.write((10 == 10) ? "Same value" : "different value");

Run it...   »

JavaScript Bitwise Operators

JavaScript bitwise operators evaluate and perform specific bitwise (32 bits either zero or one) expression.

Operator Sign Description
Bitwise AND & Return bitwise AND operation for given two operands.
Bitwise OR | Return bitwise OR operation for given two operands.
Bitwise XOR ^ Return bitwise XOR operation for given two operands.
Bitwise NOT ~ Return bitwise NOT operation for given operand.
Bitwise Shift Left << Return left shift of given operands.
Bitwise Shift Right >> Return right shift of given operands.
Bitwise Unsigned Shift Right >>> Return right shift without consider sign of given operands.
<script>
    document.writeln(5 & 10);   // return 0,    calculation: 0000 0101 & 0000 1010 = 0000 0000
    document.writeln(5 | 10);   // return 15,   calculation: 0000 0101 | 0000 1010 = 0000 1111
    document.writeln(5 ^ 10);   // return 15,   calculation: 0000 0101 ^ 0000 1010 = 0000 1111
    document.writeln(~5);       // return -6,   calculation: ~ 0000 0101 = 1111 1010

    document.writeln(10 << 2);  // return 40,   calculation: 0000 1010 << 2 = 0010 1000
    document.writeln(10 >> 2);  // return 2,    calculation: 0000 1010 >> 2 = 0000 0010
    document.writeln(10 >>> 2); // return 2,    calculation: 0000 1010 >>> 2 = 0000 0010
</script>

Run it...   »

Miscellaneous Operators

  1. typeof
  2. delete
  3. instanceof
  4. new
  5. this
  6. in

typeof

JavaScript typeof operator return valid data type identifiers as a string of given expression. typeof operator return six possible values: "string", "number", "boolean", "object", "function", and "undefined".

typeof expression
typeof(expression)

Example

var name = 'Opal Kole';
var age = 48;
var married = true;
var experience = [2010, 2011, 2012, 2013, 2014];
var message = function(){ console.log("Hello world!"); }
var address;

typeof name;        // Returns "string"
typeof age;         // Return "number"
typeof married;     // Return "boolean"
typeof experience;  // Return "object"
typeof message;     // Return "function"
typeof address;     // Return "undefined"

Run it...   »

delete

JavaScript delete operator deletes object property or remove specific element in array.
If delete is not allow (you can't delete if element not exist, array element undefined etc..) then return false otherwise return true.

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

delete array;                   // delete array
delete array[index];

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 = "Opal Kole";
myObj.age = 48;
myObj.married  = true;

delete myObj.name;                  // delete object property
delete myObj["count"];              // delete object property

var experience = [2010, 2011, 2012, 2013, 2014];    // array elements
delete experience[2];               // delete 2nd index from array elements
console.log(experience);            // [2010, 2011, undefined × 1, 2013, 2014]

Run it...   »

instanceof

JavaScript instanceof indicate boolean result, Return true, If object is an instance of specific class.

object instanceof class

Example

<script>
    var num1 = new Number(15);
    document.writeln(num1 instanceof Number);               // Returns true
    var num2 = 10;
    document.writeln(num2 instanceof Number);               // Return false

    document.writeln(true instanceof Boolean);              // false
    document.writeln(0 instanceof Number);                  // false
    document.writeln("" instanceof String);                 // false

    document.writeln(new Boolean(true) instanceof Boolean); // true
    document.writeln(new Number(0) instanceof Number);      // true
    document.writeln(new String("") instanceof String);     // true
</script>

Run it...   »

new

JavaScript new operator to create an instance of the object.

var myObj = new Object;
var myObj = new Object( );  // or you can write
                            // Object - required, for constructor of the object.

var arr = new Array( [ argument1, argument2, ..., ..., argumentN ] );
                        // argument - optional, pass any number of argument in a object.

Example

var myObj = new Object();  // or you can write: var myObj = new Object;
myObj.name = "Opal Kole";
myObj.address = "63 street Ct.";
myObj.age = 48;
myObj.married  = true;

console.log(myObj);
    // Object {name: "Opal Kole", address: "63 street Ct.", age: 48, married: true}

Run it...   »

this

JavaScript this operator represent current object.

this["propertyname"]
this.propertyname

Example

function employee(name, address, age, married) {
   this.name = name;
   this.address = address;
   this.age = age;
   this.married = married;
}
var myObj = new employee("Opal Kole", "63 street Ct.", 48, true);
console.log(myObj);
    // employee {name: "Opal Kole", address: "63 street Ct.", age: 48, married: true}

Run it...   »

in

JavaScript in operator return boolean result if specified property exist in object.

property in object

Example

<script>
    var myObj = new Object();       // or you can write: var myObj = new Object;
    myObj.name = "Opal Kole";
    myObj.address = "63 street Ct.";
    myObj.age = 48;
    myObj.married  = true;

    document.writeln("name" in myObj);       // Returns true
    document.writeln("birthdate" in myObj);  // Returns false
                                        // birthdate propery not in myObj
    document.writeln("address" in myObj);    // Returns true
    document.writeln("age" in myObj);        // Returns true
    document.writeln("married" in myObj);    // Returns true
</script>

Run it...   »