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