The conditional operator in JavaScript first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. The conditional operator is also known as the ternary operator.
The JavaScript conditional (ternary) operator is only operator that takes three operands a condition followed by a question mark (?), then the first expression to be executed if the condition is truthy followed by a colon (:), and finally the second expression to be executed if the condition is falsy.
There are six falsy values in JavaScript. These are − 0 (zero), false, empty string (” or “”), null, undefined, and NaN. All other values are treated as truthy in JavaScript.
Syntax
Following is the syntax of conditional (ternary) operator in JavaScript −
var variable = condition ? exp1 : exp2;
Parameters
Here, we have explained the parameters in the above statement.
condition − It is a conditional statement.
exp1 − If the conditional statement evaluates truthy, control flow executes the exp1 expression.
exp2 − If the conditional statement evaluates falsy, control flow executes the exp2 expression.
If the value of the condition is any falsy value, the result of the expression will be the value of exp2; otherwise, it will be the value of exp1.
Example
In the example below, we compare the value of the num1 and num2 variables in the conditional statement. Here, the conditional statement evaluates true, so the result variable contains the value of the first expression.
<html><body><div id="output"></div><script>var num1 =90;var num2 =67;var res = num1 > num2 ?"num1 is greater than num2":"num2 is greater than num1";
document.getElementById("output").innerHTML = res;</script></body></html>
It will produce the following result −
num1 is greater than num2
Example
In the example below, we assign the value to the object property according to the conditional statements result.
Now, imagine what if you need to write the if-else statement to assign value to each property conditionally. The code will become complex, but with the ternary operator, you can easily do it with a single line of code.
<html><body><div id="output"></div><script>const year =2004;const obj ={
name:"John",
age: year <2005?"adult":"minor",
city:"New York"};
document.getElementById("output").innerHTML =
obj.name +" is "+ obj.age +" and lives in "+ obj.city;</script></body></html>
It will produce the following result −
John is adult and lives in New York
Example
This example demonstrates that you can also use the expression instead of values. According to the conditional statement, control flow evaluates the first or second expression and assigns the resultant value to the ‘result’ variable.
<html><body><div id="output"></div><script>let operator ='-';let res = operator =='+'?10+20:10-20;
document.getElementById("output").innerHTML ="The result is: "+ res;</script></body></html>
It will produce the following result −
The result is: -10
In short, you can use the ternary or conditional operator to shorten the code, which uses the if-else statement.
Handling null values
We can use the JavaScript conational operator to handle null value to set a default value if the user passes a null value.
The assignment operators in JavaScript are used to assign values to the variables. These are binary operators. An assignment operator takes two operands, assigns a value to the left operand based on the value of right operand. The left operand is always a variable and the right operand may be literal, variable or expression.
let x =10;// right operand is a literallet y = x;// right operand is a variablelet z = x +10;// right operand is an expression
An assignment operator first evaluates the expression and then assign the value to the variable (left operand).
A simple assignment operator is equal (=) operator. In the JavaScript statement “let x = 10;”, the = operator assigns 10 to the variable x.
We can combine a simple assignment operator with other type of operators such as arithmetic, logical, etc. to get compound assignment operators. Some arithmetic assignment operators are +=, -=, *=, /=, etc. The += operator performs addition operation on the operands and assign the result to the left hand operand.
Arithmetic Assignment Operators
In this section, we will cover simple assignment and arithmetic assignment operators. An arithmetic assignment operator performs arithmetic operation and assign the result to a variable. Following is the list of operators with example −
Assignment Operator
Example
Equivalent To
= (Assignment)
a = b
a = b
+= (Addition Assignment)
a += b
a = a + b
-= (Subtraction Assignment)
a -= b
a = a b
*= (Multiplication Assignment)
a *= b
a = a * b
/= (Division Assignment)
a /= b
a = a / b
%= (Remainder Assignment)
a %= b
a = a % b
**= (Exponentiation Assignment)
a **= b
a = a ** b
Simple Assignment (=) Operator
A simple assignment (=) operator assigns a value to a variable. We can assign a single value to multiple variables. This is known as assignment chaining.
<html><body><div id="output"></div><script>let x =5;let y = x +10;
document.getElementById("output").innerHTML ="Value of x : "+ x +"<br>"+"Value of y : "+ y;</script></body></html></pre>
Below is an example of assignment chaining −
<html><body><div id="output"></div><script>let x = y =5;
document.getElementById("output").innerHTML ="Value of x : "+ x +"<br>"+"Value of y : "+ y;</script></body></html></pre>
Addition Assignment (+=) Operator
The JavaScript addition assignment operator performs addition on the two operands and assigns the result to the left operand. Here addition may be numeric addition or string concatenation.
x += b;
In the above statement, it adds values of b and x and assigns the result to x.
Example: Numeric Addition Assignment
<html><body><div id="output"></div><script>let x =5;
x +=7;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Example: String Concatenation Assignment
<html><body><div id="output"></div><script>let x ="Hello";
x +=" World";
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Subtraction Assignment (-=) Operator
The subtraction assignment operator in JavaScript subtracts the value of right operand from the left operand and assigns the result to left operand (variable).
let x -=b;
In the above statement, it subtracts b from x and assigns the result to x.
<html><body><div id="output"></div><script>let x =15;
x -=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Multiplication Assignment (*=) Operator
The multiplication assignment operator in JavaScript multiplies the both operands and assign the result to the left operand.
let x *= b;
In the above statement, it multiplies x and b and assigns the result to x.
<html><body><div id="output"></div><script>let x =10;
x *=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Division Assignment (/=) Operator
This operator divides left operand by the right operand and assigns the result to left operand.
let x /= b;
In the above statement, it divides x by b and assigns the result (quotient) to x.
<html><body><div id="output"></div><script>let x =10;
x /=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Remainder Assignment (%=) Operator
The JavaScript remainder assignment operator performs the remainder operation on the operands and assigns the result to left operand.
let x %= b;
In the above statement, it divides x by b and assigns the result (remainder) to x.
<html><body><div id="output"></div><script>let x =12;
x %=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Exponentiation Assignment (**=) Operator
This operator performs exponentiation operation on the operands and assigns the result to left operand.
let x **= b;
In the above statement, it computes x**b and assigns the result to x.
<html><body><div id="output"></div><script>let x =5;
x **=3;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
JavaScript Bitwise Assignment operators
A bitwise assignment operator performs bitwise operation on the operands and assign the result to a variable. These operations perform two operations, first a bitwise operation and second the simple assignment operation. Bitwise operation is done on bit-level. A bitwise operator treats both operands as 32-bit signed integers and perform the operation on corresponding bits of the operands. The simple assignment operator assigns result is to the variable (left operand).
Following is the list of operators with example −
Assignment Operator
Example
Equivalent To
&= (Bitwise AND Assignment)
a &= b
a = a & b
|= (Bitwise OR Assignment)
a |= b
a = a | b
^= (Bitwise XOR Assignment)
a ^= b
a = a ^ b
Bitwise AND Assignment Operator
The JavaScript bitwise AND assignment (&=) operator performs bitwise AND operation on the operands and assigns the result to the left operand (variable).
let x &= b;
In the above statement, it performs bitwise AND on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x &=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Bitwise OR Assignment Operator
The JavaScript bitwise OR assignment (|=) operator performs bitwise OR operation on the operands and assigns the result to the left operand (variable).
let x |= b;
In the above statement, it performs bitwise OR on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x |=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Bitwise XOR Assignment Operator
The JavaScript bitwise XOR assignment (^=) operator performs bitwise XOR operation on the operands and assigns the result to the left operand (variable).
let x ^= b;
In the above statement, it performs bitwise XOR on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x ^=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
JavaScript Shift Assignment Operators
A shift assignment operator performs bitwise shift operation on the operands and assign the result to a variable (left operand). These are a combinations two operators, the first bitwise shift operator and second the simple assignment operator.
Following is the list of the shift assignment operators with example −
Assignment Operator
Example
Equivalent To
<<= (Left Shift Assignment)
a <<= b
a = a << b
>>= (Right Shift Assignment)
a >>= b
a = a >> b
>>>= (Unsigned Right Shift Assignment)
a >>>= b
a = a >>> b
Left Shift Assignment Operator
The JavaScript left shift assignment (<<=) operator performs left shift operation on the operands and assigns the result to the left operand (variable).
let x <<= b;
In the above statement, it performs left shift on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x <<=2;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Right Shift Assignment Operator
The JavaScript right shift assignment (>>=) operator performs right shift operation on the operands and assigns the result to the left operand (variable).
let x >>= b;
In the above statement, it performs right shift on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x >>=1;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
Unsigned Right Shift Assignment Operator
The JavaScript unsigned right shift assignment (>>>=) operator performs unsigned right shift operation on the operands and assigns the result to the left operand (variable).
let x >>>= b;
In the above statement, it performs unsigned right shift on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x >>>=2;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html></pre>
JavaScript Logical Assignment operators
In JavaScript, a logical assignment operator performs a logical operation on the operands and assign the result to a variable (left operand). Each logical assignment operator is a combinations two operators, the first logical operator and second the simple assignment operator.
Following is the list of the logical assignment operators with example −
Assignment Operator
Example
Equivalent To
&&= (Logical AND Assignment)
a &&= b
a = a && b
||= (Logical OR Assignment)
a ||= b
a = a || b
??= (Nullish Coalescing Assignment)
a ??= b
a = a ?? b
Example
<html><body><div id="output"></div><script>var a =5;var b =10;var result =(a &&= b);
document.getElementById("output").innerHTML ="Value of (a &&= b) => "+ result +"<br/>";
result =(a ||= b);
document.getElementById("output").innerHTML +="Value of (a ||= b) => "+ result;</script></body></html></pre>
The bitwise operators in JavaScript perform operations on the integer values at the binary level. They are used to manipulate each bit of the integer values. Bitwise operators are similar to logical operators but they work on individual bits.
JavaScript bitwise operators works on 32-bits operands. In JavaScript, numbers are stored as 64-bit floating point number. JavaScript converts the numbers to 32-bit signed integer before performing the operation. After bitwise operation, it converts the result to 64-bits number.
There are seven bitwise operators in JavaScript. Following is the list of bitwise operators with description.
Operator
Name
Description
&
Bitwise AND
Returns 1 if both bits are 1, otherwise 0.
|
Bitwise OR
Returns 1 if either bit is 1, otherwise 0.
^
Bitwise XOR
Returns 1 if both bits are different, otherwise 0.
!
Bitwise NOT
Returns 1 if bit is 0, otherwise 0.
<<
Left Shift
Shifts the bits left by pushing zeros in from right and discarding leftmost bits.
>>
Right Shift
Shifts the bits right by pushing copies of leftmost bit in from left and discarding rightmost bits.
>>>
Right Shift with Zero
Shifts the bits right by pushing zeros in from left and discarding rightmost bits.
JavaScript Bitwise AND (&) Operator
The bitwise AND (&) operator performs AND operation on each pair of bits of its integer operands. After the operation, it returns a new integer value with the updated bits.
When bitwise AND operator is applied on a pair of bits, it returns 1 if both bits are 1, otherwise returns 0.
Following is the truth table for bitwise AND operation −
A
B
A & B
0
0
0
0
1
0
1
0
0
1
1
1
Let’s understand bitwise AND operation taking an example of 4-bit operands.
A
B
A & B
1111
0001
0001
1111
0010
0010
1111
0100
0100
1111
1000
1000
Example
Let’s perform bitwise AND (&) operation on 5 and 7. These numbers are represented as 32-bits integer.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
5 & 7
00000000000000000000000000000101 (= 5)
The resultant value of the OR operation of each bit of the 101 and 111 binary numbers is the same as below.
1 & 1 = 1
1 & 0 = 0
1 & 1 = 1
So, the resultant binary number is 111, which is equal to 7 in the decimal representation.
<html><body><div id="output"></div><script>const a =5;const b =7;
document.getElementById("output").innerHTML ="a & b = "+(a & b);</script></body></html>
It will produce the following result −
a & b = 5
JavaScript Bitwise OR (|) Operator
The bitwise OR (|) operator performs OR operation on each pair of bits of its integer operands. After the operation, it returns an integer value with the updated bits.
When bitwise OR operator is applied on a pair of bits, it returns 1 if either of bits is 1, otherwise returns 0.
Following is the truth table for bitwise OR operation.
A
B
A | B
0
0
0
0
1
1
1
0
1
1
1
1
Let’s understand bitwise OR operation taking an example of 4-bit operands.
A
B
A | B
1111
0001
1111
1111
0010
1111
1111
0100
1111
1111
1000
1111
Example
Let’s perform bitwise OR (|) operation on 5 and 7. These numbers are represented as 32-bits integer.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
5 | 7
00000000000000000000000000000111 (= 7)
The resultant value of the OR operation of each bit of the 101 and 111 binary numbers is the same as below.
1 | 1 = 1
1 | 0 = 1
1 | 1 = 1
So, the resultant binary number is 111, which is equal to 7 in the decimal representation.
<html><body><div id="output"></div><script>const a =5;const b =7;
document.getElementById("output").innerHTML ="a | b = "+(a | b);</script></body></html>
It will produce the following result −
a | b = 7
JavaScript Bitwise XOR (^) Operator
The bitwise XOR (^) operator performs exclusive OR operation on each pair of bits of its integer operands. After the operation, it returns an integer value with the updated bits.
When bitwise XOR operator is applied on a pair of bits, it returns 1 if both bits are different, otherwise returns 0.
Following is the truth table for Bitwise XOR operation −
A
B
A ^ B
0
0
0
0
1
1
1
0
1
1
1
0
Example
Let’s perform bitwise XOR (^) operation on 5 and 7.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
5 ^ 7
00000000000000000000000000000010 (= 2)
After performing the bitwise XOR operation of 101 and 111, the resultant binary number is given below.
1 ^ 1 = 0
1 ^ 0 = 1
1 ^ 1 = 0
So, the resultant binary number is 010, which is equal to 2.
<html><body><div id="output"></div><script>const a =5;const b =7;
document.getElementById("output").innerHTML ="a ^ b = "+(a ^ b);</script></body></html>
It will produce the following output −
a ^ b = 2
JavaScript Bitwise NOT (~) Operator
The bitwise NOT (~) operator performs the NOT operation on each bit of the binary number. It is a unary operator that inverts each bit of the binary number and returns the 2s complement to the binary number.
Following is the truth table for the Bitwise XOR operation.
Input (A)
Output (~A)
0
1
1
0
Example
Let’s perform bitwise NOT (~) operation.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
~5
11111111111111111111111111111010 (= -6)
~7
11111111111111111111111111111000 (= -8)
Try to execute the below code −
<html><body><div id="output"></div><script>const a =5;const b =7;
document.getElementById("output").innerHTML ="~a = "+(~a)+"<br>"+"~b = "+(~b)</script></body></html>
It will produce the following output −
~a = -6
~b = -8
Bitwise Left Shift (<<) Operator
The JavaScript bitwise left shift (<<) operator moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros from the right and left most bits are discarded.
Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.
Example
When you left shift 5 (101) by 1, a value becomes 10 (1010). When you perform the left shift operation by 2 places, the resultant value is 20 (10100).
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
5
00000000000000000000000000001010 (= 10)
5
00000000000000000000000000010100 (= 20)
The following JavaScript program demonstrates the bitwise left shift operation −
The bitwise right shift (>>) operator moves all the bits in its first operand to the right by the number of places specified in the second operand. It inserts copies of leftmost bit in from left and discard rightmost bits. In this way it preserves the sign of the number.
In short, it removes the N last bits from the number. Here, N is a second operand. Right-shifting the binary number is equivalent to dividing the decimal number by 2.
Example
In the below example, when we perform the right shift operation on 101 for the first time, the value of a becomes equal to 010. After performing the right-shift operation for the second time, the resultant value is 001, equal to 1 in the decimal representation.
The Right Shift with Zero (>>>) operator is very similar to the right shift operator. It always fills the left bits with zero without worrying about the sign of the bit.
Example
Here, the binary representation of 10 is 1010. When we perform the right shift with zero operation, it moves all bits 2 times in the right direction and inserts two 0 at the start. So, the resultant value will be 0010, equal to 1.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
5 >>> 1
00000000000000000000000000000010 (= 2)
The following JavaScript program demonstrate the use of >>> operator.
The logical operators in JavaScript are generally used with Boolean operands and return a boolean value. There are mainly three types on logical operators in JavaScript – && (AND), || (OR), and ! (NOT). These operators are used to control the flow the program.
Although the logical operators are typically used with Boolean values, they can be used with any type. For each non-boolean value, the operator converts to a boolean. The falsy values are converted to false and truthy values to true.
There are six falsy values in JavaScript: false, null, undefined, 0 (zero), “” (empty string), NaN. The value other than falsy values are treated as truthy values. So non zero numbers, non-empty strings, etc., are truthy values.
The && and || operators return the value of one of the operands based on condition. So if the operands are non-boolean, they return a non-boolean value. The ! operator always returns a Boolean value.
The operands may be literals, variables or expressions. These are first evaluated to boolean equivalent before performing the logical operation.
In the below table, we have given the logical operators with its description and example. Lets assume: x = true, y = false.
Operator
Description
Example
&&
Logical AND
(x && y) is false.
||
Logical OR
(x || y) is true.
!
Logical NOT
!(x) is false.
JavaScript Logical AND (&&) Operator
The logical AND (&&) operator evaluates the operands from left to right. If the first operand can be converted to false, it will return the value of first operand, otherwise it will return the value of the second operand.
x && y
In the above expression if x is a falsy value then it will return the value of x otherwise it will return the value of y.
The above rule is followed for all types of operands, whether they are Boolean values, numbers or strings, etc.
Let’s first discuss with Boolean operands. In general, for a set of Boolean operands, it will return true if both operands are true else it returns false.
For all above examples, you have noticed that if the first operand can be converted to false then it returns the value of first operand otherwise the value of second operand.
Example
Now let’s look at an example of a logical expression.
<html><body><div id="output"></div><script>const x =3;const y =-2;
document.getElementById("output").innerHTML = x >0&& y >2;</script></body></html>
Here x > 0 is evaluated to true and y > 2 is evaluated to false. And the final expression becomes true && false which is evaluated as false.
Multiple && Operators
If we have multiple && operators in an expression, the && operator evaluates the expression from left to right and it converts each operand to a boolean value. If the result is false, then it returns the value of that operand and terminates the execution. If all the operands are truthy then it returns the value of the last operand.
The logical OR (||) operator also evaluates the operands from left to right. If the first operand can be converted to true, it will return the value of first operand, otherwise it will return the value of the second operand.
x || y
In the above expression if x is a truthy value then it will return the value of x otherwise it will return the value of y.
As || is a logical operator but it can be applied to any type of operand not only boolean.
Let’s first discuss with Boolean operands. In general, for a set of Boolean operands, it will return flase if both operands are false else it returns true.
For all above examples, you have noticed that if the first operand can be converted to true then it returns the value of first operand otherwise the value of second operand.
Example
Now let’s look at an example with expression −
<html><body><div id="output"></div><script>const x =3;const y =-2;
document.getElementById("output").innerHTML = x >0|| y >2;</script></body></html>
Multiple || Operators
We may have multiple || operators in an expression. The || operator evaluates the expression from left to right and it converts each operand to a boolean value. If the result is true, then it returns the value of that operand and terminates the execution. If all the operands are falsy then it returns the value of the last operand.
The logical NOT (!) Operator is a unary operator. It returns false if the operand can be converted to true, otherwise it returns true.
!x
If x is truthy, the NOT (!) operator returns false. If the x is falsy then it returns true.
Same as Logical AND, and OR operators, this logical NOT operator can also be used with non-boolean operands. But it will always return a Boolean value.
An expression may have more than one logical operators in JavaScript. In such situation, the operators are evaluated on the basis of their precedence. The NOT (!) operator has the highest precedence. Then AND (&&) operator has the higher precedence than OR (||) operator.
The logical NOT (!) operator has the highest precedence so !false is evaluated to true. Hence the expression now looks like “false || true && true”. The && has higher precedence than || so next “true && true” will be evaluated. Now the expression looks like “false || true”. Finally “false || true” will be evaluated to true.
Short Circuit Evaluation
Logical expressions are evaluated from left to right. These are tested for short-circuit evaluation. Following is the rule of short circuit evaluation −
false && any_value returns false
true || any_value retuns true
The any_value part is not evaluated so it doesn’t have any effect on final result.
The comparison operators in JavaScript compare two variables or values and return a boolean value, either true or false based on comparison result. For example, we can use the comparison operators to check whether two operands are equal or not.
The comparison operators are used in logical expressions. A logical expression is evaluated to either true or false.
The comparison operators are binary operators as they perform operations on two operands. The operands can be numerical, string, logical, or object values.
There are eight comparison operators in JavaScript to perform different types of comparison. Here, we have given a table explaining each comparison operator with the example.
Operator
Description
Example
==
Equal
x == y
!=
Not Equal
x != y
===
Strict equality (equal value and equal type)
x === y
!==
Strict inequality (not equal value or not equal type)
x !== y
>
Greater than
x > y
<
Less than
x < y<
>=
Greater than or Equal to
x >= y
<=
Less than or Equal to
x <= y
How comparison is done?
If both operands are of same type, the comparison operators compare the values. However, if the operands are of different types, JavaScript perform appropriate type conversion for the comparison. This is known as type coercion.
The comparison is done by checking the numerical values of the operands if both the operands are numbers. The strings are compared based on lexicographical ordering, using Unicode values. The following type coercion is done when a string is compared with a number.
If the string contains only numeric value, it is converted to number type.
If the string contains non-numeric values as well, it will be converted to NaN.
If string is empty, it is converted to zero.
The strict equality (===) and strict inequality (!==) operators perform strict comparison. These operators don’t perform type conversion before performing comparison operation.
Dealing with falsy values
There are some falsy values in JavaScript. JavaScript deals with these falsy values differently while performing the comparison. Followings are the flasy values −
0 (zero)
false
‘ ‘ or ” ” (Empty String)
null
undefined
NaN
All comparison operators (excepts === and !==) converts false and empty string to zero before performing comparison.
In addition to above, the less and, greater than operators (, >=) convert null to zero and undefined to NaN.
JavaScript Equality (==) Operator
The “equality” operator checks if the value of two operands are equal or not. It returns true if the operands are equal, otherwise it returns false. If the operands are of different types, it performs type conversion and then compare the operands.
Lets look at some examples of comparison with no type conversion. The both operands are of same type.
const a =10;const b =20;
a ==10;//true
a == b;// false "Hello"=="Hello";// true
Now lets check some example of comparison with type conversion. Here the operands are of different types.
5=='5';// true0==false;// true0=='';// true
In the first example above, ‘5’ is converted to 5 (string to number conversion). The false and empty string (‘ ‘), are converted to zero (0) before comparison.
Example
The following code shows how to use equality operator in JavaScript −
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a == b);
document.getElementById("output").innerHTML ="(a == b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
JavaScript Inequality (!=) Operator
The “inequality” operator checks if the values of two operands are not equal. It returns true if the operands are not equal, otherwise it returns false. Same as the equality operator, type conversion is performed if the operands are not of same type.
In the example below two values of same type are compared for inequality check. If the values are not equal, the inequality operator will return true.
Lets check for inequality when the operands are of different types.
10!='10';// false0!=false;// false
Here in first example, ’10’ is type casted to 10. Here string is converted to number type. In second example, false (Boolean value) is converted to zero (number).
Example
The following code shows how to use inequality operator in JavaScript.
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a != b);
document.getElementById("output").innerHTML ="(a != b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
JavaScript Strict Equality (===) Operator
The “strict equality” operator checks whether the values and data types of the two operands are equal or not. It returns true if both operands are equal and of same type.
In other words, it checks the equality of the operands without the type conversion. If the operands are of different types, it returns false without further checking the value.
The following code shows how to use strict equality operator in JavaScript.
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a === b);
document.getElementById("output").innerHTML ="(a === b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
Strict Inequality (!==) Operator
The “strict inequality” operator checks whether the two operands are not equal in value or type. It returns true if the operands are of same type but not equal or are of different types.
Same as strict equality operator, it also first checks the inequality of operands without type conversion. If the operands are of different type, it will return true without further checking the value.
The following code shows how to use strict inequality operator in JavaScript.
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a !== b);
document.getElementById("output").innerHTML ="(a !== b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
JavaScript Greater Than (>) Operator
The “greater than” operator checks if the value of the left operand is greater than the value of the right operand. If yes, it returns true otherwise it returns false.
The following code shows how to use greater than operator in JavaScript −
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a > b);
document.getElementById("output").innerHTML ="(a > b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
Greater Than or Equal (>=) Operator
The “greater than or equal” operator checks if the value of the left operand is greater than or equal to the value of the right operand. If yes, it returns true otherwise false.
The following code shows how to use greater than or equal to operator in JavaScript.
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a >= b);
document.getElementById("output").innerHTML ="(a >= b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
JavaScript Less Than (<) Operator
The “less than operator” returns true if the value of the left operand is less than the value of the right operand, otherwise it returns false.
The following code shows how to use less than operator in JavaScript −
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a < b);
document.getElementById("output").innerHTML ="(a < b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
JavaScript Less Than or Equal (<=) Operator
The less than or equal operator checks if the value of the left operand is less than or equal to the value of the right operand. If yes, then the condition becomes true.
The following code shows how to use less than or equal operator in JavaScript −
<html><body><div id="output"></div><script>const a =10;const b =20;let result =(a <= b);
document.getElementById("output").innerHTML ="(a <= b) => "+ result;</script><p> Set the variables to different values and then try...</p></body></html>
Comparing null, undefined and NaN
In JavaScript, null, undefined and NaN are the falsy values that are not converted to zero (0) for the comparison.
Arithmetic operators in JavaScript perform mathematical calculations on numeric values (operands). Most of the arithmetic operators are binary operators as they perform calculations on two operands. Some arithmetic operators are unary operators. The unary operators perform computation on a single operand.
JavaScript supports many arithmetic operators such as addition, subtraction, multiplication, division operators, etc. It uses the common symbols for arithmetic operators such as “+” for addition, “–” for subtraction, “*” for multiplication, “/ ” for division etc.
The operands can be literals, variables or the expression.
var z =3+5;// 3 and 5 are literal values.const x =3; y =5;var z = x + y ;// x and y are variables. var z =3+2*x // expression
In general, arithmetic operators are used to perform mathematical operations but they can be used for other operations as well. For example, the addition operator (+) can be used for string concatenation.
Here, we have given a table containing the mathematical operators and explaining the functionality of each operator.
Operator
Name
Description
+
Addition
Adds two operands
–
Subtraction
Subtracts the second operand from the first
*
Multiplication
Multiply both operands
/
Division
Divide the numerator by the denominator
%
Modulus
Outputs the remainder of an integer division
++
Increment
Increases an integer value by one
—
Decrement
Decreases an integer value by one
Let’s discuss the different operators with the help of examples.
JavaScript Addition (+) Operator
The JavaScript addition (+) operator adds two numeric operands. It is denoted by the plus (+) symbol.
var x =5, y =10;var sum = x + y;
This operator can also be used to concatenate strings and/or numbers.
var z ='10'+3// returns 103var z ='10'+'3'// returns 103
If one operand is string, the addition operator converts the other operand to string and concatenate it with first operand.
If both the operands are string, it just concatenates the second operand to the first operand.
If both operands are numeric values, it will return the numeric value.
Example
In the below example, we demonstrate adding two decimal numbers and concatenating the strings and numbers.
<html><body><script>const x =3; y =5;var z = x + y ;
document.write(z +"</br>");var z ='10'+3
document.write(z +"</br>");var z ='10'+'3';
document.write(z +"</br>");</script></body></html></pre>
JavaScript Subtraction (-) Operator
JavaScript subtraction (-) operator subtracts the right operand from the left operand and produces their difference. It is denoted by the minus (-) symbol.
The subtraction operator uses numeric operands but can also be used for non-numeric operands such as strings.
If both operands are numbers, then resultant is number.
If any or both operands are strings (containing only numbers), it first converts the strings to number and then performs subtraction operations.
If string contains non numeric value, it will return NaN.
If any operand is NaN or Infinity, the result will be NaN or Infinity respectively.
Example
In the below example, we demonstrate the subtraction two decimal numbers and of other datatypes.
<html><body><script>var x =20; y =10;var z = x - y ;
document.write(z +"</br>");
x ="20"; y ="10"
z = x - y ;
document.write(z +"</br>");
x ="20ee";
z = x - y ;
document.write(z +"</br>");</script><p>Change the values of the variables and test the resultant values</p></body></html></pre>
JavaScript Multiplication (*) Operator
The JavaScript multiplication operator multiplies two numbers (operands). It gives the product of two operands. It is denoted by the asterisk (*) symbol. If two operands are of same sign, the product is positive. If the two operands are of different sign, the product is negative.
If any or both operands are string, it converts the string to number and then returns their product.
Example
In the example below, we demonstrate the use of multiplication operator on different types of operands.
<html><body><script>var x =20; y =10;var z = x * y ;
document.write(z +"</br>");
x ="20"; y ="10"
z = x * y ;
document.write(z +"</br>");
x ="20ee";
z = x * y ;
document.write(z +"</br>");</script><p>Change the values of the variables and test the resultant values</p></body></html></pre>
JavaScript Division (/) Operator
The JavaScript division (/) operator divides the left operand (dividend) by the right operand (divisor) and returns the quotient. It is represented by the slash (/) symbol.
20/10// returns 220/-10// return -2100/0// returns Infinity0/0// returns NaN
Example
Let's demonstrate the use of division operator.
<html><body><script>var x =20; y =10;var z = x / y ;
document.write(z +"</br>");
x ="20"; y ="10"
z = x / y ;
document.write(z +"</br>");
z = x /0;
document.write(z +"</br>");
z =0/0;
document.write(z +"</br>");</script><p>Change the values of the variables and test the resultant values</p></body></html></pre>
JavaScript Modulus (%) Operator
The JavaScript modulus (%) operator returns the remainder when first operand is divided by the second operand. It is also known as remainder operator. It is denoted by the percent (%) symbol. It takes the sign of dividend. Lets take an example 5%3 gives 2 because when 5 is divided by 3, it gives remainder as 2.
Example
Let's understand the modulus operator with the help of an example program.
<html><body><script>var x =20%9;var y =-20%9;var z =20.43%9;var a =20%-9;var b =20%10;
The JavaScript increment (++) operator increases the value of operand by one. It is an unary operator. It takes only one operand. It is denoted by double plus (++) sign.
There are two types of increment operator in JavaScript −
Prefix Increment Operator
The prefix increment operator increments the value of the variable before its current value is used. For example,
var x =10;var y =++x;// x is now 11 and y is also 11.
Postfix Increment Operator
The postfix increment operator increments the value of the variable after its current value is used. For example,
var a =10;var b = a++;// a is now 11 but b is 10.
Here, in the second line of the above code, first the current value of a is assigned to b, then it is incremented.
Lets look at the following example −
<html><body><script>var x =10;var y =--x;//prefix decrementvar a =10;var b = a--;// postfix decrement
document.write("x = "+ x);
document.write(" y = "+ y +"<br>");
document.write("a = "+ a);
document.write(" b = "+ b +"<br>");</script><p>Change the values of the variables and check the results</p></body></html></pre>
JavaScript Decrement (--) Operator
The JavaScript decrement (--) operator decreases the value of operand by one. It is also an unary operator, i.e., it takes only one operand. It is denoted by double minus (--) sign.
There are two types of decrement operator in JavaScript −
Prefix Decrement Operator
The prefix decrement operator decrements the value of the variable before its current value is used. For example,
var x =10;var y =--x;// x is now 9 and y is also 9.
Postfix Decrement Operator
The postfix decrement operator decrements the value of the variable after its current value is used. For example,
var a =10;var b = a--;// a is now 9 but b is 10.
Here, in the second line of the above code, first the current value of a is assigned to b, then it is decremented.
Lets look at the following example −
<html><body><script>var x =10;var y =--x;//prefix decrementvar a =10;var b = a--;// postfix decrement
document.write("x = "+ x);
document.write(" y = "+ y +"<br>");
document.write("a = "+ a);
document.write(" b = "+ b +"<br>");</script><p>Change the values of the variables and check the results</p></body></html></pre>
In JavaScript, an operator is a symbol that performs an operation on one or more operands, such as variables or values, and returns a result. Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands, and + is called the operator.
JavaScript supports the following types of operators.
Arithmetic Operators
Comparison Operators
Logical (or Relational) Operators
Bitwise Operators
Assignment Operators
Miscellaneous Operators
Lets have a look on all operators one by one.
JavaScript Arithmetic Operators
The JavaScript arithmetic operators are used to perform mathematical calculations such as addition, multiplication, subtraction, division, etc. on numbers. JavaScript supports the following arithmetic operators −
Assume variable x holds 10 and variable y holds 20, then −
Operator
Description
Example
+ (Addition)
Adds two operands.
x + y will give 30.
– (Subtraction)
Subtracts the second operand from the first.
x – y will give -10.
* (Multiplication)
Multiplies both operands.
x * y will give 200.
/ (Division)
Divides the numerator by the denominator.
y / x will give 2.
% (Modulus)
Outputs the remainder of an integer division.
y % x will give 0
++ (Increment)
Increases an integer value by one.
x++ will give 11.
— (Decrement)
Decreases an integer value by one.
x– will give 9.
Addition operator (+) works for Numeric as well as Strings. e.g. “a” + 10 will give “a10”.
JavaScript Comparison Operators
The JavaScript comparison operators compare two values and returns a boolean result (true or false). JavaScript supports the following comparison operators −
Assume variable x holds 10 and variable y holds 20, then −
Operator
Description
Example
== (Equal)
Checks if the value of two operands is equal or not. If yes, then the condition becomes true.
(x == y) is not true.
!= (Not Equal)
Checks if the value of two operands is equal or not. If the values are not equal, then the condition becomes true.
(x != y) is true.
=== (Strict equality)
It checks whether the value and data type of the variable is equal or not. If yes, then the condition becomes true.
(x === y) is not true.
!== (Strict inequality)
It checks whether the value and data type of the variable is equal or not. If the values are not equal, then the condition becomes true.
(x !== y) is true.
> (Greater than)
Checks if the value of the left operand is greater than the value of the right operand. If yes, then the condition becomes true.
(x > y) is not true.
< (Less than)
Checks if the value of the left operand is less than the value of the right operand. If yes, then the condition becomes true.
(x < y) is true.
>= (Greater than or Equal to)
Checks if the value of the left operand is greater than or equal to the value of the right operand. If yes, then the condition becomes true.
(x >= y) is not true.
<= (Less than or Equal to)
Checks if the value of the left operand is less than or equal to the value of the right operand. If yes, then the condition becomes true.
(x <= y) is true.
JavaScript Logical Operators
The logical operators are generally used to perform logical operations on boolean values. But logical operators can be applied to values of any types not only boolean.
JavaScript supports the following logical operators −
Assume that the value of x is 10 and y is 0.
Operator
Description
Example
&& (Logical AND)
If both the operands are non-zero, then the condition becomes true.
(x && y) is false
|| (Logical OR)
If any of the two operands are non-zero, then the condition becomes true.
(x || y) is true.
! (Logical NOT)
Reverses the logical state of its operand. If a condition is true, then the Logical NOT operator will make it false.
!x is false.
JavaScript Bitwise Operators
The JavaScript bitwise operators are used to perform bit-level operations on integers. JavaScript supports the following seven types of bitwise operators −
Assume variable x holds 2 and variable y holds 3, then −
Operator
Description
Example
& (Bitwise AND)
It performs a Boolean AND operation on each bit of its integer arguments.
(x & y) is 2.
| (Bitwise OR)
It performs a Boolean OR operation on each bit of its integer arguments.
(x | y) is 3.
^ (Bitwise XOR)
It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both.
(x ^ y) is 1.
~ (Bitwise Not)
It is a unary operator and operates by reversing all the bits in the operand.
(~y) is -4.
<< (Left Shift)
It moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.
(x << 1) is 4.
>> (Right Shift)
Binary Right Shift Operator. The left operands value is moved right by the number of bits specified by the right operand.
(x >> 1) is 1.
>>> (Right shift with Zero)
This operator is just like the >> operator, except that the bits shifted in on the left are always zero.
(x >>> 1) is 1.
JavaScript Assignment Operators
In JavaScript, an assignment operator is used to assign a value to a variable. JavaScript supports the following assignment operators −
Operator
Description
Example
= (Simple Assignment)
Assigns values from the right side operand to the left side operand
z = x + y will assign the value of x + y into z
+= (Add and Assignment)
It adds the right operand to the left operand and assigns the result to the left operand.
z += x is equivalent to z = z + x
= (Subtract and Assignment)
It subtracts the right operand from the left operand and assigns the result to the left operand.
z -= x is equivalent to z = z – x
*=(Multiply and Assignment)
It multiplies the right operand with the left operand and assigns the result to the left operand.
z *= x is equivalent to z = z * x
/= (Divide and Assignment)
It divides the left operand with the right operand and assigns the result to the left operand.
z /= x is equivalent to z = z / x
%= (Modules and Assignment)
It takes modulus using two operands and assigns the result to the left operand.
z %= x is equivalent to z = z % x
Same logic applies to Bitwise operators so they will become like <<=, >>=, >>=, &=, |= and ^=.
JavaScript Miscellaneous Operators
There are few other operators supported by JavaScript. These operators are conditional operator (? :), typeof operator, delete operator, etc.
In the below table, we have given the JavaScript miscellaneous operators with its explanation.
Operator
Description
? : (Conditional )
If Condition is true? Then value X : Otherwise value Y
typeof
It returns the data type of the operand.
?? (Nullish Coalescing Operator)
It returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
delete
It removes a property from an object.
, (Comma)
It evaluates its operands (from left to right) and returns the value of the last operand.
() (Grouping)
It allows to change the operator precedence.
yield
It is used to pause and resume a generator function.
(Spread)
It is used to expand the iterables such as array or string.
** (Exponentiation)
Raises the left operand to the power of the right operand