fbpx
April 6, 2020
javascript operators

JAVASCRIPT OPERATORS | Introduction to Operators used in JavaScript

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

ARITHEMTIC OPERATORS

  • 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

ARITHEMTIC OPERATORS
  • 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

ARITHEMTIC OPERATORS
  • 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

ARITHEMTIC OPERATORS

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

ARITHMETIC OPERATORS

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

ARITHEMTIC OPERATORS

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

ARITHEMTIC OPERATORS

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

LOGICAL OPERATORS

  • 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

LOGICAL OPERATORS

  • 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

LOGICAL OPERATORS

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

LOGICAL OPERATORS

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

illustration of assignment operators

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

COMPARISON OPERATORS

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

Leave a Reply

Your email address will not be published. Required fields are marked *