05 - Basic operators in Javascript

We code to perform operations. We have a set of symbols that are used to perform predefined operations. We can use literals or values stored in variables or constants or a combination of these as operands for performing the operation.

There are two types of operators based on the number of operands that the operator needs to perform the operation. Operators can also be classified based on the kind of operations they perform.

Expressions

An expression in Javascript is a syntactically correct combination of operands and operators. The expression is evaluated on the operation performed by the operator and gives a result. If more than one operator is specified in the expression then the operations are performed based on precedence and priority. You can recollect the BODMAS rule (Brackets, Of, Division, Multiplication, Addition, Subtraction) that you learnt in Algebra.

Assignment Operator

This operator is the most essential of all operators. The operator is denoted by the ‘=’ (equals) symbol. It is a binary operator and assigns the value of the right side operand to the left side operand. The left side operand has to be a variable or constant being created. The right side operand can be a literal or a constant or variable or even an expression.

var x = 1;
const pi = 3.14;
var area = pi * x * x;

Arithmetic Operators

The table below illustrates the operators involved in arithmetic operations. They are binary operators. The division symbol returns the quotient of the operation as the result while % returns the remainder of the operation.

Operator symbol

Operation  Performed

+

Addition

-

Subtraction

*

Multiplication

/

Division

%

Modulo Division

 

Like discussed before, what if more than one arithmetic operator is involved in the expression? The operation to be performed first has to be resolved first.

% , / , * - Modulo division, Division, Multiplication

 

+, - - 

 

Addition, Subtraction

 

Consider the expression, 3 * 5 + 8

Here the two operators involved are * and +. It can easily be seen that * belongs to a group that has higher priority than +. Hence the result is 23.

Consider the expression, 1 4 * 2 / 4

Here the two operators are * and /. We see that they both belong to the same grouping. Now we have to evaluate from left to right. Hence the result is 7.

What if we want the priority to be altered? What if we want one part of the expression to be evaluated before another part gets executed even though the priority might differ?

We can use a pair of parentheses (‘()’). The expression within the parentheses gets executed first.

Now consider the expression, 3 * ( 5 + 8)

The addition operation is performed before multiplication even if addition has lower priority than multiplication. Hence the result of the expression evaluates to 39.

The operators grouped together have the same priority. The operators in the first group are executed first and then the second group. If two operators from the same group appear in the expression, then the expression is resolved from left to right.

OperatorFunction
Greater than
Lesser than
>=Greater than or equal to
<=Lesser than or equal to
==Equals
 !=Not equals

Earlier we had seen assignment operator, =. This operator assigns the value from the right operand to the left operand. We have some more varieties of assignment operators discussed below.

Arithmetic assignment operators

So, these operators can combine the function of both arithmetic and assignment operators. Here the result is stored in the left operand itself.

OperatorExplanation
&&AND; x && y; Returns true if both x and y are true and false otherwise.
||OR; x || y; Returns true if x or y or both are true and false otherwise.
!NOT; !x; Inverts the value of X; Returns true if false and false if true.

Relational operators

Relativity is an important tool that a human mind uses to decide many things. From cell phones to cameras to cars and even spouses, one tends to compare against other things to decide the best. In scripting too some functions need to be performed based on the result of comparisons. There are a set of comparison or relational operators in Javascript. The operators evaluate the expression to either boolean true or boolean false. If more than one operator appears in the expression, then the expression is simply evaluated from left to right.

OperatorExplanation
>> Right shift operator; Shifts the digits in the left operand by the number in the right operand to the right.
<< Left shift operator; Shifts the digits in the right operand by the number in the right operand to the left.
>>> Performs unsigned right shift.

Logical operators

The logical operators can perform the operations AND, OR, and NOT operations. These operators are represented by the symbols &&, || and ! in the same order. The operators AND and OR are binary while NOT is unary. The operands can be expressions or boolean values. These operators return a boolean true or boolean false as a result.

Operator

Explanation

&&

AND; x && y; Returns true if both x and y are true and false otherwise.

||

OR; x || y; Returns true if x or y or both are true and false otherwise.

!

NOT; !x; Inverts the value of X; Returns true if false and false if true.

 

Shift operators

The shift operators are used to perform left shift and right shift on the digits. You can simply convert the decimal values to binary values and shift by the number. Then you can convert the result back to decimal base.

Operator

Explanation

>> 

Right shift operator; Shifts the digits in the left operand by the number in the right operand to the right.

<< 

Left shift operator; Shifts the digits in the right operand by the number in the right operand to the left.

>>> 

Performs unsigned right shift.

 

You can also use these shift operators with the assignment operators to get the shift assignment operators.

Bitwise operators

These are also binary operators and work at the bit levels. As with shift operators, the operands are converted to binary and Bitwise operation is performed and the result is converted back to decimal format. There is Bitwise AND, OR and XOR operators.

Operator

Operation

&

Bitwise AND; x&y;

|

Bitwise OR; x|y;

^

BitwiseXOR; x^y;

 

 

Consider the expression  2 & 3

It evaluates to 2.

Consider the expression 2 | 3

It evaluates to 3.

Consider the expression 2 ^ 3

It evaluates to 1.

 

 Again these operators can be used with the assignment operators which makes them bitwise assignment operators.

Increment and Decrement operators

These are unary operators and can help increment or decrement the values of variables. It depends if the operators appear before or after the operand. If it appears before, then it is called pre fix and if it appears after, it is called post fix.

With the prefix operator, the value is first incremented or decremented and then taken. For post fix, the value is taken and then incremented. Note that in the table below, X is a variable. ++ and – are the increment and decrement operators.

Operator

Explanation

X ++

Post increment

++ X

Pre increment

X--

Post decrement

--X

Pre decrement

 

Let us declare a variable Y with value 2.

var y = 2;

alert(y++);

The alert function displays a message box with the value 2 and then increments y by 1. Notice that the operator has appeared after the operand.

alert(y);

The alert function displays a message box with the value 3 as the increment operator increments y’s value by 1 in the previous line.

alert(++y);

The alert function displays a message box with the value 4 as the operator appears before the operand.

The decrement operator works similarly except that it decrements the value by 1 instead of incrementing it.

 

 Conditional operator

The conditional operator ‘? :’ is used to assign values based on the result of a condition. Here is the syntax.

Condition ? value 1: value 2                                                                                                    

The condition is an expression that can evaluate to either boolean true or false. This operator returns value 1 if the condition evaluates to true and it returns value 2 if the condition evaluates to false.

 

var y;

y = 2 > 3 ? 2 : 3;

alert(y);

The message box displays 3.

 

Like us on Facebook