What are operators in JavaScript?
Operators are the basic building blocks of any programming language. Like other programming languages, JavaScript also has built in operators which are used to make number calculations, assign values etc. These are the symbols which tell the JavaScript engine to perform calculations like addition, subtraction, division, multiplication, assigning vales to the variables.
There are different types of operators used in JavaScript which are explained below.
- Arithmetic operators
- Logical operators
- Comparison operators
- Assignment operators
- Conditional or ternary operators
1. Arithmetic operators in JavaScript
The arithmetic operators in JavaScript are used to perform arithmetic operations like addition, subtraction, multiplication, division and modulus.
| Operators | Description | Example | Result |
| + | Addition | x+y | Adds the values of x and y |
| – | Subtraction | x-y | Subtracts the value of y from x |
| * | Multiplication | x*y | Multiply the value of x with y |
| / | Division | x/y | Divides the value of x by y |
| % | Modulus | x%y | Gives remainder when y divides x |
Where x and y are the operands. Let us take example of arithmetic operators.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Operators in JavaScript</title>
</head>
<body>
<h3>Arithmetic operators in JavaScript</h3>
<script>
var x=8;
var y=3;
document.write("The sum of two numbers is ",x+y, "<br>");
document.write("The subtraction of two numbers is ",x-y, "<br>");
document.write("The multiplication of two numbers is ",x*y, "<br>");
document.write("The division of two numbers is ",x/y, "<br>");
document.write("The Modulus of given numbers is ",x%y, "<br>");
</script>
</body>
</html>
2. Logical operators in JavaScript
The logical operators are used to work with conditions. The answer will be true or false depending upon the values of operands.
Logical AND (&&) operator
In logical AND operator, the result will be true if both operands are true else it will result as false.
Logical OR (||) operator
In logical OR operator, the result will be true if any one of the operands is true.
Logical NOT (!) operator
It just changes the current state of operand into opposite of it. If the operand is true, then logical NOT will produce result as false and vice versa.
| Logical operator | Example | Result |
| && | x && y | It results true if both x and y are true |
| || | x || y | True if either x or y is true |
| ! | !x | True if x is false and vice-versa |
Program showing the use of Logical AND operator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fiding percentage</title>
</head>
<body>
<h3>Percentage program</h3>
<script>
var x1=50, x2=60, x3=90, x4=95, x5=80;
var sum, per, max=500;
sum=x1+x2+x3+x4+x5;
per=(sum/max)*100;
if (per>33 && per<=45)
{
document.write("Third Division");
}
else if (per>45 && per<=60)
{
document.write("Second Division");
}
else if (per>60 && per<=75)
{
document.write("First Division");
}
else
{
document.write("Distinction");
}
</script>
</body>
</html>This program will produce output as
First Division
3. Comparison operator in JavaScript
JavaScript has operators which are used to compare operand values and after processing them produces the processed result.
| Operator | Name | Example | Result |
| == | Equal | x == y | True if x is equal to y |
| === | Identical | x === y | True if x is equal to y, and they are of the same type |
| != | Not equal | x!=y | True if x is not equal to y |
| !== | Not identical | x!==y | True if x is not equal to y, or they are not of the same type |
| < | Less than | x < y | True if x is less than y |
| > | Greater than | x > y | True if x is greater than y |
| >= | Greater than or equal to | x >= y | True if x is greater than or equal to y |
| <= | Less than or equal to | x <= y | True if x is less than or equal to y |
4. Assignment operators in JavaScript
The following assignment operators are used in JavaScript language.
| Operator | Description | Example | Is The Same As |
| = | Assign | x = y | x = y |
| += | Add and assign | x += y | x = x + y |
| -= | Subtract and assign | x -= y | x = x – y |
| *= | Multiply and assign | x *= y | x = x * y |
| /= | Divide and assign quotient | x /= y | x = x / y |
| %= | Divide and assign modulus | x %= y | x = x % y |
String operators in JavaScript
When there is need to concatenate two strings, the string concatenation operator + is used. You can also use += operator to append one string with another string. Let us write a code to concatenate two string and append one string to another.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Concatenation</title>
</head>
<body>
<h3>Joining two strings</h3>
<script>
var string1="Welcome to the ";
var string2="world of programming";
alert(string1+string2); //Will concatenate string1 and string2
var str1="Welcome to ";
var str2="programming tutorial";
str1+=str2;
alert(str1); //Will append str2 in str1
</script>
</body>
</html>
Incrementing and Decrementing operator in JavaScript
When there is requirement of increasing and decreasing the value of operand, the incrementing or decrementing operators are used. There are post or pre increment or post or pre decrement in JavaScript.
| Operator | Name | How it works |
| x++ | Post increment operator | Return x then increment by one |
| ++x | Pre increment operator | First increment by one then return x |
| x– | Post decrement operator | Returns x then decrement by one |
| –x | Pre decrement operator | First decrement by one then returns x |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Increment/Decrement operators</title>
</head>
<body>
<h3>Uses of Increment and Decrement operator</h3>
<script>
var x=20, y=30, z=40, w=50;
document.write("<h4>Post increment</h4>");
document.write(x++, "<br/>");
document.write(x, "<br/><br/>");
document.write("<h4>Pre increment</h4>");
document.write(++y, "<br/>" );
document.write(y, "<br/><br/>" );
document.write("<h4>Post decrement</h4>");
document.write(z--, "<br/>" );
document.write(z, "<br/><br/>" );
document.write("<h4>Pre decrement</h4>");
document.write(--w, "<br/>" );
document.write(w, "<br/><br/>" );
</script>
</body>
</html>
