Operators help in conducting some operations and adding logics in JavaScript. Operators are the foundation to prepare any expression in JavaScript. According to MDN there are 10 categories of operators but I will talk about only essential and very useful operators.
JavaScript has unary, binary and ternary operators and it depends on the number of operands they have.
Unary Operator
An unary operator will have single operand.
Example: x++ or ++x
Note: when we add ++ before the operand and after the operand then they are called consecutively prefix and postfix operators.
Binary Operator
A binary operator requires two operand and one operator.
Example: 2 + 4 and 2 * 3
1. Assignment Operators
In assignment operator, value of right operand will be assigned to value of left operand.
Example: x = y
Compound Assignment Operator:
- Addition Assignment:
x+=y - Subtraction Assignment:
x-=y - Multiplication Assignment:
x*=y - Multiplication Assignment:
x/=y
Comparison Assignment Operator:
In this operands are compared and if the comparison is true it will return a value. There are three types of comparison assignment operators.
- Equal ( == ): Returns true if operands are equal.
- Not Equal ( != ): Returns true if operands are not equal.
- Strict Equal ( === ): Returns true if operands are equal and are of the same type.
2. Arithmetic Operators
An arithmetic operator takes numerical values as the operands and will return a single numerical value.
Some of the arithmetic operators are as follows:
a. Increment (++):
It increments any number by one.
Example: If x is 5, then ++x will have x as 6 and returns 6, whereas x++ returns 5.
b. Decrement (–):
It decrements any number by one.
Example: If x is 5, then –x will have x as 4 and returns 4, whereas x– returns 5.
c. Unary (+):
Converts the operand to a number if it is not a number.
Example:
var x = 5, y = ‘5’;
alert( x + y ); //55 concatenation occurs as you add a number with a string value
alert( x + +y); //10 addition happens as you are converting a string value to number by adding + before it
d. Remainder (%):
This is a binary operator and it returns the integer remainder of dividing the two operands.
Example:
0 % 2 returns 0; //because 0 is smaller than 2
1 % 2 returns 1; //because 1 is smaller than 2
2 % 2 returns 0; because there is no remainder
3 % 2 returns 1; because 1 is remainder
4 % 2 returns 0; because there is no remainder
3. Logical Operators
These operators are used to determine the logic between the values.
Types of Logical Operators:
If x=6 and y=3
- && (and) Eg. ( x < 10 && y > 1 ) will return true value.
- || (or) Eg. ( x === 5 || y === 5 ) will return false value.
- ! (not) Eg. !( x > y ) will return false value.
4. String Operators
It will concatenate two strings together and will return another string which would be combination of two strings.
For Example:
var a = ‘String’;
var b = ‘example’;
alert (a+b ); // Stringexample
5. Conditional Operators
It assigns a value to a variable based on some condition.
Syntax: (condition)? value1:value2
For example: ( age < 18 ) ? “Not an Adult” : “Adult”;
If the value of age variable is below 18, it will return “Not an adult”, otherwise the value of age will be “Adult”.
6. Comparision Operators
It compares its operands and return a logical value which is traue or false.
- Equal ( == )
- Not Equal ( !== )
- Strict Equal ( === )
- Strict Not Equal ( !=== )
- Greater Than ( > )
- Greater Than or Equal ( >= )
- Less Than ( < )
- Less Than or Equal ( <= )
Note: there is a difference between == and ===. So they are not alternative of each other. Equality ( == ) checks for the values only while Strict Equality ( === ) checks for values and data type of the values too.
6. Miscellaneous Operators
typeof Operator:
It will return the type of a variable.
Eg: var shape = “round”;
alert(typeof shape);
It will return “string”.
instanceof Operator:
It will return true or false for a variable instance based on a particular object.
Eg: var time = new Date();
alert( time instanceof Date );
It will return true.
Void:
The void operator evaluates an expression and returns undefined. I always use void when I want to make a link a submit button for a form or I want a link without any href value.
Eg: <a href=”javascript:void(document.formName.submit())”>Submit a Form</a>
or
<a href=”javascript:void(0)”>It will not do anything when you click on it.</a>
Comma Operator:
Comma in JavaScript comes under the operators category so use it wisely.
Examples:
1. Use of comma operator in loop to declare multiple variables.
for( var i = 0, j = 10; i < 10; i++, j–)
{
console.log( i +” – “+ j );
}
2. Always use this operator when you are declaring variables.
var a = 5, b = 6, c = 9;
Operator Precedence
Precedence of operators means the order of operators an expression gets applied to evaluate itself. It will follow the BODMAS ( Brackets – Orders – Division – Multiplication – Addition – Subtraction ) rule.
Brackets
You can start with anything but inside brackets, going from left to right.
Example: 4 × (3 + 2) = ?
You need to do the operation, or sum, inside the brackets first, 3 + 2, then multiply the answer by 4.
3 + 2 = 5.
4 × 5 = 20
If you ignored the brackets and did the sum 4 × 3 + 2 you would get 14 and you can see how the brackets make a difference to the answer.
Orders
Do anything involving a power or a square root next (these are also known as orders), again working from left to right if there is more than one.
Example: 32 + 5 = ?
You need to do the power sum first, before you can add 5.
32 = 3 × 3 = 9
9 + 5 = 14
Division and Multiplication
Once you have done any parts of the sum involving brackets or powers the next step is division and multiplication. Multiplication and division rank equally, so you go from left to right in the sum, doing each operation in the order in which it appears.
Example: 4 × 5 ÷ 2 + 7 = ?
You need to do division and multiplication first, but you have one of each.
Start from the left and work across to the right, which means that you start with 4 × 5 = 20. Then do the division, 20 ÷ 2 = 10.
Only then do you move to the addition: 10 + 7 = 17. The answer is 17.
Addition and Subtraction
The final step is to calculate any addition or subtraction. Again, subtraction and addition rank equally, and you simply move from left to right.
Example:4 + 6 – 7 + 3 = ?
You simply start on the left and work your way across.
4 + 6 = 10
10 – 7 = 3
3 + 3 = 6
The answer is 6.
Expressions in JavaScript
Any valid unit of code that resolves a value.
Following are the different type of categories of Expression:
- Arithmetic: It will use arithmetic operators, for example 5+8.
- String: For example, “Fred” or “234”.
- Logical: Will have true or False value.
- Primary expressions: Basic keywords and general expressions in JavaScript eg. this and grouping operator ()
- Left-hand-side expressions: Left values are the destination of an assignment eg. new
Thanks for Reading
Megha Sharma
Course: Web Master (Online)
