The JavaScript Operators

Are you preparing for IT certification? With practice questions, study notes, interactive quizzes, tips and technical articles, uCertify PrepKits ensure that you get a solid grasp of core technical concepts to ace your certification exam in first attempt.

The JavaScript Operators

Rating:

In the world of programming languages, operators play a very important role. Without operators, the programming languages have little value. The operators perform many operations such as arithmetic operations, comparisons, assignment of values, etc. The JavaScript language consists of several operators for performing different operations.

The operators used in JavaScript are as follows:

The arithmetic operators: The arithmetic operators are used for various types of calculations.

The following are the arithmetic operators:

The addition operator (+): The addition operator is a binary operator that is used to add two or more numeric values and produce the sum.

The subtraction operator (-): The subtraction operator is a binary operator that is used to calculate the difference of two numbers.

The multiply operator (*): The multiply operator is a binary operator that is used to multiply two or more values to get the product of two numbers.

The divide operator (/): The divide operator is a binary operator that is used to divide two numbers and produce the result.

The modulus operator (%): The modulus operator is a binary operator that is used to find the remainder after the completion of division.

The following example will demonstrate the use of the addition operator:

<script language="javascript">
function add()
{
       var num1=parseInt(prompt("Enter a number"))
       var num2=parseInt(prompt("Enter a number"))
       var sum=num1+num2
       alert(sum)
       var diff=num1-num2
       alert(diff)
       var prod=num*num2
       alert(prod)
       var div=num1/num2
       alert(div)
       var mod=num%num2
       alert(mod)
}
</script>

The addition operator can also be used to concatenate strings. The following example will demonstrate this:

<script language="javascript">
function conc()
{
       var str1=prompt("Enter your name")
       var str2=prompt("Enter your age")
       var str3="Name="+str1+" "+"Age="+str2
       alert(str3)
}
</script>

The increment operator: The increment operator is a unary operator that is used to increment the value of a variable by one. It has two different behaviors depending on the position of the operator. The two behaviors are as follows:

1. x++


2. ++x

Both of the above statements mean x=x+1. But when these are assigned to a variable, the meaning is changed. Let us see this in the following example:

Suppose the value of x=10, then in the statement b=++x, the value of the variables x and b will be 11. It is so because b=++x contains two statements:

1. b=x


2. x=x+1

Since the statement executes from left to right and the ++ operator has more priority than the = operator, x will first be incremented to one, and then its value will be assigned to b.

In case of the statement b=x++, the value of b will be 10 and the value of x will be 11 because b=x++ contains two statements.

1. b=x


2. x=x+1

In this case, when the statement executes from left to right, it comes in contact with the variable x. The value of x is assigned to b and x is incremented to 1.

The following example will demonstrate the use of the increment operator:

<script language="javascript">
function incropr()
{
       var a=10
       var b
       ++a
       alert(a) //a=11
       a++
       alert(a) //a=12
       b=++a
       alert(a) //a=13
       alert(b) //b=13
       b=a++
       alert(a) //a=14
       alert(b) //b=13
}
</script>

The decrement operator: The decrement operator is a unary operator that is used to decrement the value of a variable by one. It has two different behaviors depending on the position of the operator. The two behaviors are as follows:

1. x--


2. --x

Both of the above statements mean x=x-1. But when these are assigned to a variable, the meaning is changed. Let us see this in the following example:

Suppose the value of x=10, then in the statement b=--x, the value of the variables x and b will be 9. It is so because b=--x contains two statements:

1. b=x


2. x=x-1

Since the statement executes from left to right and the -- operator has more priority than the = operator, x will first be decremented by one, and then its value will be assigned to b.

In case of the statement b=x--, the value of b will be 10 and the value of x will be 9 because b=x-- contains two statements.

1. b=x


2. x=x-1

In this case, when the statement executes from left to right, it comes in contact with the variable x. The value of x is assigned to b and x is decremented by 1.

The following example will demonstrate the use of the decrement operator:

<script language="javascript">
function decropr()
{
       var a=10
       var b
       --a
       alert(a) //a=9
       a--
       alert(a) //a=8
       b=--a
       alert(a) //a=7
       alert(b) //b=7
       b=a--
       alert(a) //a=6
       alert(b) //b=7
}
</script>

The negation operator: The negation operator is used to negate a value.

The following example will demonstrate the use of the negation operator:

<script language="javascript">
function negate()
{
       var a=10
       var b=-a
       alert(b)//b=-10
}
</script>

The comparison operators: The comparison operators are used to compare two or more values. The result of this comparison is a boolean value that can be true or false.

The following are the comparison operators:

The equals operator (==): The equals operator is used to test the equality of operands. If the operands are equal, it returns true; otherwise, it returns false.

The not equal to operator (!=): The not equal to operator is used to test the inequality of operands. It returns true if the operands are not equal; otherwise, it return false.

The greater than operator (>): The greater than operator is used to test whether or not the first operand is greater than the second operand. If the first operand is greater than the second operand, it returns true; otherwise, it returns false.

The greater than or equal to operator (>=): The greater than or equal to operator is used to test whether or not the first operand is greater than or equal to the second operand. If the first operand is greater than or equal to the second operand, it returns true; otherwise, it returns false.

The less than operator (<): The less than operator is used to test whether or not the first operand is less than the second operand. If the first operand is less than the second operand, it returns true; otherwise, it returns false.

The less than or equal to operator (<=): The less than or equal to operator is used to test whether or not the first operand is less than or equal to the second operand. If the first operand is less than or equal to the second operand, it returns true. If the first operand is greater than the second operand, it returns false.

<script language="javascript">
function compare()
{
       var a=10
       var b=10
       alert(a==b) //result is true
       alert(a!=b) //result is false
       alert(a>b) //result is false
       alert(a>=b) //result is true
       alert(a<b) //result is false
       alert(a<=b) //result is true
}
</script>

The assignment operator: The assignment operators are used to assign a value to a variable. These variables can be used in other parts of the program with the same or different values and for different purposes.

The following are the assignment operators:

The equal to operator(=): This operator is used for assigning values to variables. It can also be used to copy the value of a variable to another variable.

For example:

var a=10 //The value 10 is assigned to variable a.
var b=a //The value of variable a is assigned to variable b.

The add by value operator (+=), subtract by value operator (-=), multiply by value operator (*=), divide by value operator (/=), modulus by value operator (%=): All these operators are assignment operators. When these operators are used, the values on the right hand side are calculated according to the operator and the result value is assigned to the left operand.

The syntaxes of these operators are as follows:

Operation	Result
x+=y	x=x+y
x-=y	x=x-y
x*=y	x=x*y
x/=y	x=x/y
x%=y	x=x%y

The following example will demonstrate the use of the assignment operators:

<script language="javascript">
function assign()
{
       var x=200
       var y=10
       x+=y
       alert(x) //210
       x=200
       x-=y
       alert(x) //190
       x=200
       x*=y
       alert(x) //2000
       x=200
       x/=y
       alert(x) //20
       x=200
       x%=y
       alert(x) //0
}
</script>

The add by value operator can also be used for the concatenation of strings.

The following code will demonstrate this:

<script language="javascript">
function conc()
{
       var str="This is a string"
       str+="This is another string"
       alert(str)
}
</script>

The left shift by value operator (<<=), right shift by value operator (>>=), zero fill by value operator (>>>=), bitwise and by value operator (&=), bitwise or by value operator (|=), bitwise xor by value operator (^=): These operators are used to perform bit operations on the values. The bits of the numbers are shifted according the operator and changes the value of the left operand.

The syntaxes of these operators are as follows:

Operation	Result
x>>=y	x=x>>y
x<<=y	x=x<<y
x>>>=y	x=x>>>y
x&=	x=x&y
x|=y	x=x|y
x^=y	x=x^y

The following example will demonstrate the use of these operators:

<script language="javascript">
function bitassign()
{
       var x=128
       var y=2
       x>>=y
       alert(x) //32
       x=128
       x<<=y
       alert(x) //512
       x=128
       x>>>=y
       alert(x) //32
       x=128
       x&=y
       alert(x) //0
       x=128
       x|=y
       alert(x) //102
       x=128
       x^=y
       alert(x) //102
}
</script>

The bitwise operators: The bitwise operators are used to shift the bits of a number according to the operator which changes the value of a number.

The following are the bitwise operators:

The bitwise and operator (&): This operator produces one if the corresponding bits of both the operands are one.

For example:

Decimal	Binary
12	1100
&	&
10	1010
=	=
8	1000

The bitwise or operator (|): This operator produces one if either or both of the corresponding bits are one.

For example:

Decimal	Binary
12	1100
|	|
10	1010
=	=
14	1110

The bitwise xor operator (^): It produces one if a bit is zero and the corresponding bit is one. If both bits are one or both bits are zero, it produces zero.

For example:

Decimal	Binary
12	1100
^	^
10	1010
=	=
6	0110

The bitwise not operator (~): It inverts all the bits of its operand.

For example:

Decimal	Binary
7	0111
-8	1000

The bitwise left shift operator (<<): It shifts the bits of a number from right to left and discards the bits that are shifted.

For example:

12	<<	2	=	48
1100	<<	2	=	110000

The bitwise right shift operator (>>): It shifts the bits of a number from left to right and discards the bits that are shifted.

12	>>	2	=	3
1100	>>	2	=	11

The bitwise zero fill operator (>>>): The bitwise zero fill operator shifts zeros from left to right and discards the bits that are shifted.

12	>>>	2	=	3
1100	>>	2	=	0011

The following code will demonstrate the use of the bitwise operators:

<script language="javascript">
function bitopr()
{
       var a=128
       var b=2
       var c=a & b
       alert(c)
       a=128
       c=a | b
       alert(c)
       a=128
       c=~a
       alert(c)
       a=128
       c=a<<b
       alert(c)
       a=128
       c=a>>b
       alert(c)
       a=128
       c=a>>>2
       alert(c)
}
</script>

The boolean operators: The boolean operators are used to check more than one condition at a time. There are situations where the JavaScript programmers have to evaluate two or more conditions and the result is based on the result of all the conditions.

There are three kinds of boolean operators as follows:

1. &&
2. ||
3. !

In the case of the && operator, the result is true only if all the conditions are true. In the given conditions, if a condition is false, the result will be false.

Following table will show the result of evaluating two conditions:

Condition 1	And Operator	Condition 2	Result
True	&&	True	True
True	&&	False	False
False	&&	True	False
False	&&	False	False

In the case of the || operator, the result is false only if both the conditions are false. Otherwise, the result is true.

The following table will show the result of the or operator:

Condition 1	Or Operator	Condition 2	Result
True	||	True	True
True	||	False	True
False	||	True	True
False	||	False	False

In the case of the not operator, if the condition is not false, it is true. If the condition is not true, it is false

The following table will show the result of the not operator:

Condition	Not Operator	Result
True	!	False
False	!	True

The typeof operator: The typeof operator is used to test the datatype of a value. These datatypes can be a number, string, boolean, object, undefined.

The following code will demonstrate the use of the typeof operator:

<script language="javascript">
function mytype()
{
       var a=2
       var b
       alert(typeof a) //output is number
       a="James"
       alert(typeof a) // output is string
       a=true
       alert(typeof a) // output is boolean
       a=document
       alert(typeof a) // output is object
       a=b
       alert(typeof a) // output is undefined
}
</script>

The void operator: The javascript: is a pseudo protocol that is used to supply parameters for the href and src attributes of the HTML tags with the help of a function. If the functions return a value, the content of the page can be replaced by that value. The void operator is used to prevent a function from returning a value.

The syntax of using the void operator is as follows:

javascript: void functionname()

The new operator: Instantiation is the process of creating instances of different objects. These instances can be created by using the new operator.

For example:

var a=new Date()
var b=new Date()

Both variables a and b can now access the properties and functions of the Date object.

Instantiation can also be done with custom objects.

<script language="javascript">
function car(name, model, year)
{
       this.name=name
       this.model=model
       this.year=year
}

var m=new car("alto","lx",2001)

Here, m is the instance of the object car.

The delete operator: The delete operator is used to remove the elements of an array. It needs the array name and the array index to delete the elements.

The syntax for using the delete operator is as follows:

delete arrayobj[arrayindex]

The following example will demonstrate the use of the delete operator:

<script language="javascript">
function mydel()
{
       var arr=new Array(1,2,3,4,5)
       alert(arr)
       delete arr[0]
       alert(arr)
}
</script>

The operator precedence: The operator precedence is an arrangement of operators in JavaScript. It decides the priority of the operators in a complex statement. If a statement consists of more than one operator, the operators are used according to their priority defined in JavaScript.

The following table displays the operator precedence:

Operator	Operator Name
()	Parentheses
[]	Braces
!	Boolean NOT
~	Bitwise NOT
-	Negation
++	Increment
--	Decrement
typeof	typeof
void	void
delete	delete
*	Multiplication
/	Division
%	Modulus
+	Addition
-	Subtraction
<<	Bitwise left shift
>>	Bitwise right shift
>>>	Bitwise zero fill
<	Less than
<=	Less than or equal to
>	Greater than
>=	Greater than or equal to
==	Equal to (Comparison)
!=	Not equal to
&	Bitwise AND
^	Bitwise XOR
|	Bitwise OR
&&	Boolean AND
||	Boolean OR
?	Conditional Operator
=	Equal to (Assignment)
*=	Multiply by value
/=	Divide by value
%=	Modulus by value
+=	Add by value
-	Subtract by value
<<=	Left shift by value
>>=	Right shift by value
>>>=	Zero fill by value
&=	Bitwise AND by value
^=	Bitwise XOR by value
|=	Bitwise OR by value
,	comma

Rating: