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,

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

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>

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>

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>

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>

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

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>

Miscellaneous Operators

typeof
delete
instanceof
new
this
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"

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]

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>

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}

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}

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>

KANSIRIS

JavaScript Operators with Example

JavaScript Arithmetic Operators

JavaScript Assignment Operators

JavaScript Comparison Operators

JavaScript Logical Operators (Boolean Operators)

JavaScript Conditional Operator (also call Ternary Operator)

JavaScript Bitwise Operators

Miscellaneous Operators

typeof

delete

instanceof

new

this

in

Complete Tutorials

Popular Posts

Labels