In this tutorial we will be discussing about JavaScript Operators which entails all the operators you can work with on JavaScript. In our previous tutorial we discussed about JavaScript Variables and we made mention of how you can name variables and the keywords that are not allowed when naming variables. If you haven’t gone through the tutorial you can do so using the link below.
Read previous tutorial on: JAVASCRIPT VARIABLES | Introduction to Variables in JavaScript
JavaScript Operators
JavaScript operators are used in carrying out simple operations such as addition, subtraction, division and so on. For example, if we have 8+1. This is a simple arithmetic addition operation. Values 8 and 1 are called operands while the “+” sign is called an operator.
There are different operators used in JavaScript to carry out different operations and they include:
- Arithmetic operators
- Logical operators
- Conditional operators
- Assignment operators
- Comparison operators
Arithmetic Operators
List of arithmetic operations we can carry out in JavaScript are shown below
- Addition operations
An addition operation include the use of the ‘+’ sign for example A+B =C , 2+2 = 4, 5+5=10, 10+1 = 11 etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHEMTIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = a+b;
document.write("a+b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
- Subtraction Operations
A subtraction operation include the use of the ‘-‘ sign for example A-B =C , 3-2 = 1, 9-2=7, 7-2=5 etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHEMTIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = a-b;
document.write("a-b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
- Division operations
A division operation works with the use of the “/” sign for example A/B =C , 9/3 = 3, 25/5=5 etc
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHEMTIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = a/b;
document.write("a/b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
- Multiplication operations
Multiplication operation in JavaScript involves the use of the ‘*’ sign for example A*B =C , 9*3 = 27, 3*3 = 9 etc
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHEMTIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = a*b;
document.write("a*b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
Modulus operations
The modulus operations makes use of the % sign. example include A%B =C , 4%3 = 1, 5%2=1
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHMETIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = a%b;
document.write("a%b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
Increment operation
The increment operation makes use of the “++” sign. for example ++A
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHMETIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = ++a;
document.write("++a =");
document.write(result);
</script>
</body>
</html>
RESULT ON WEB PAGE
Decrement operation
Decrement operation makes use of the “–” sign. Example –B
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARITHMETIC OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
result = --a;
document.write("--a =");
document.write(result);
</script>
</body>
</html>
RESULT ON WEB PAGE
Logical operators
There are three operators under the logical operators and they include:
- The logical OR operator ||
This operator gives the result as TRUE if any of the operands is non zero. Another thing you have to know about logical operations is that 1 signifies TRUE and 0 signifies FALSE.
For example
- 1 || 1 = 1
- 1||0 = 1
- 0||0 = 0
- 0||1 = 1
Example using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>LOGICAL OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 0;
var b = 0;
var lineBreak = ('<br>')
result = a||b;
document.write("a = 0");
document.write(lineBreak);
document.write("b = 0");
document.write(lineBreak);
document.write("a||b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
- The logical AND operator &&
The logical AND operator gives the result as TRUE if both operands are non zero. Another thing you have to know about logical operations is that 1 signifies TRUE and 0 signifies FALSE.
- 1&&1 = 1
- 0 && 0 = 0
- TRUE && TRUE = TRUE
- FALSE && FALSE = FALSE
- TRUE && FALSE = FALSE
- FALSE && TRUE = FALSE
- 1&&0 = 0
- 0&&1= 0
Example using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>LOGICAL OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 0;
var b = 0;
var lineBreak = ('<br>')
result = a&&b;
document.write("a = 0");
document.write(lineBreak);
document.write("b = 0");
document.write(lineBreak);
document.write("a&&b =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
- The logical NOT operator !
The logical NOT operator reverses the decision of the logical OR and Logical AND operators. For example if the result of a logical OR operation is TRUE. The logical NOT reverses it to FALSE.
- !(1 || 1) = 0
- !(1||0) = 0
- !(0||0) = 1
- !(0&&1) = 1
Example using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>LOGICAL OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 0;
var b = 0;
var lineBreak = ('<br>')
result = !(a&&b);
document.write("a = 0");
document.write(lineBreak);
document.write("b = 0");
document.write(lineBreak);
document.write("!(a&&b) =");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
Conditional operators ?
The condition operator works in a slightly different way. Over here you can state the result it should give if any condition is met. The syntax for conditional operation is shown below
(If Condition is true)? Then value X : Otherwise value Y
Example ( a > b)? 200 : 400
In the example above if a is greater than b the result will be 200 otherwise the result will be 400. So the result is 200 only when the condition is TRUE and the result is 400 only when the condition is FALSE.
Example using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>LOGICAL OPERATORS </title>
</head>
<body>
<script type = "text/javascript">
var a = 200;
var b = 400;
var lineBreak = ('<br>')
result = (a > b) ? "TRUE" : "FALSE";
document.write("a = 200");
document.write(lineBreak);
document.write("b = 400");
document.write(lineBreak);
document.write("(a > b) = ");
document.write(" " + result);
</script>
</body>
</html>
RESULT ON WEB PAGE
NOTE: You Can set the variables to different values and different operators to check other results
Assignment operators
There are different operators used under the assignment operators and they are all listed below
- Simple assignment =
The simple assignment involves assigning a value to another. for instance we can say
A = B+C This sums up B+C and assigns the value to A.
- Add and assignment +=
This adds the value first before assigning them. For instance
A +=B this sums up A+B and assigns the value to A …….. therefore A= A+B
- Subtract and assignment -=
This subtracts the value first before assigning them. For instance
A -=B this sums up A-B and assigns the value to A …… therefore A= A-B
- Multiply and assignment *=
This multiply the values together first before assigning the result to one of the values.
A *=B this multiply A*B and assigns the result to A ….. therefore A= A*B
- Divide and assignment /=
This divides the values together first before assigning the result to one of the values
A /=B this divides A/B before assigning the value to A … therefore A= A/B
- Modulus and assignment
This finds the modulus of both values before assigning the result to the first value.
A%=B this finds the modulus of A%B then assigns the result to A …..therefore A = A%B
- Examples using JavaScript
<html>
<title> illustration of assignment operators </title>
<body>
<script type = "text/javascript">
var a = 20;
var b = 5;
var linebreak = "<br />";
document.write(" a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write(" a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write(" a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write(" a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write(" a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
document.write(" a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
RESULT ON WEB PAGE
Comparison operators
The list of operators used for comparison in JavaScript are shown below
- Equal Operator ==
This operator gives a result as true if both operands are equal e.g if A = 2, B = 2 then A==B is TRUE
- NOT Equal Operator !=
This operator gives a result as true if both operands are unequal. e.g is A = 2, B = 3 then A!=B is TRUE
- Greater than Operator >
This operator gives result as true if the value on the left is greater than the value on the right. E.g A=2, B=3 then A>B is FALSE
- Greater than or equal to operator
This operator gives result as true if the value on the left is greater than or equal to the value on right. E.g A=2, B=3 then A>=B is FALSE
- less than operator
This operator gives the result as true if the value on the left side is less than the value on the right. E.g A=2, B=3 then A<B is TRUE
- less than or equal to operator
This operator gives the result as true if the value on the left side is less than or equal to the value on the right. E.g A=2, B=3 then A<B is TRUE
Examples using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>COMPARISON OPERATORS</title>
</head>
<body>
<script type="text/javascript">
var a = 10;
var b =20;
var linebreak = '<br/>'
result = (a==b);
document.write("is a == b ? ");
document.write(result);
document.write(linebreak);
result = (a!=b);
document.write("is a != b ? ");
document.write(result);
document.write(linebreak);
result = (a>b);
document.write("is a > b ? ");
document.write(result);
document.write(linebreak);
result = (a<b);
document.write("is a < b ? ");
document.write(result);
document.write(linebreak);
result = (a<=b);
document.write("is a <= b ? ");
document.write(result);
document.write(linebreak);
result = (a>=b);
document.write("is a >= b ? ");
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
RESULT ON WEB PAGE
CONCLUSION
JavaScript Operators are very important and forms part of the backbone of coding effectively with JavaScript. We hope you fully understand how to make use of operators effectively now. Lets move on to the next topic on JAVASCRIPT IF ELSE