Operators in JavaScript | Types, Example

Operators in JavaScript are very similar to the operators that appear in the other programming languages such as C++, or Java.

The definition of an operator is simply a symbol that tells the interpreter (or compiler) to perform a certain operation or action, usually on numbers.

For example, when we add or subtract two values, e.g., adding 10 with 20 (i.e., 10 + 20), here ‘+’ is known as operator and (10 + 20) is known as numeric expression.

An expression in JavaScript consists of any combination of operators, variables, constants, and functions.

For example: (f – 32) * 5 / 9 is an expression. When this expression evaluates by Java interpreter, it produces a single value.

Operators are used extensively in JavaScript program to perform some sort of calculation, comparison, or assignment on one or more values.

For example, some common calculations might be finding the sum of two numbers, combining two strings, or dividing two numbers.

In addition to, an operator provides a shortcut to reduce the length of code so that we need to type less.

Types of Operators in JavaScript


In JavaScript programming language, operators are classified into eight different categories:

  • Arithmetic Operators
  • Assignment Operators
  • Comparison (Relational) Operators
  • Logical Operators
  • Bitwise Operators
  • Conditional Operators
  • String Operators
  • Special Operators

Arithmetic (Mathematical) Operators in JavaScript


Arithmetic operators in JavaScript are used to perform the most common mathematical calculations or arithmetic operations on the operands or two or more values.

These operators are also called mathematical operators. There are the following types of arithmetic operators that are supported by JavaScript language.

Operator Meaning Description
1. + Addition Performs addition operation.
2. – Subtraction or unary minus Performs subtraction operation.
3. * Multiplication Performs multiplication operation.
4. / Division Performs division operation.
5. % Modulus (Remainder) Returns the remainder of a division operation.

Addition Operator (+)

This operator is the most commonly used operator in JavaScript. It can be used to add two or more numbers of any type, to join two or more strings, and to add number and string.

Let’s create a simple JavaScript program to add two numbers using (+) operator and display its result.

Program code 1:

<html>
<head>
    <title>Performing addition of two numbers</title>
</head>
<body>
   <script>
      let x = 20, y = 30;
      let sum = x + y; // Adding two numbers with + operator.
      document.write("Sum of two numbers: " +sum); // Displaying the result.
   </script>
</body>
</html>
Output of code:
     Sum of two numbers: 50

In this program, we have calculated the sum of two numbers and store the result into a variable sum.

Type Conversion in Addition Calculation

JavaScript automatically perform type conversion when working with mathematical operators. When we use addition or other mathematical operators, JavaScript automatically converts different values such as an integer (a non-decimal numeric value) and float (a decimal numeric value) to appropriate type. Let’s create a program based on it and see the result.

Program code 2:

<html>
<body>
  <script>
     let x = 20, y = 30.10;
     let sum = x + y; // Adding two numbers with + operator.
     document.write("Sum of two numbers: " +sum); // Displaying the result.
   </script>
</body>
</html>
Output of code:
      Sum of two numbers: 50.1

As you observe the result, JavaScript added two integer and float numbers together and gave back the result in float type.

String Concatenation using (+) Operator


The addition operator (+) also performs string concatenation. It joins two or more strings into a single string. For example, the expression “Java” + “Script” gives the result “JavaScript” string.

We can concatenate (or join) any number of strings or literals together using (+) operator. Let’s take an example program based on string concatenation.

Program code 3:

<html>
<body>
 <script>
      let firstName = "John";
      let lastName = " Michael";
      let fullName = firstName + lastName ; // Joining two strings with + operator.
     document.write("Full name: " +fullName); // Displaying the result.
</script>
</body>
</html>
Output of code:
     Full name: John Michael

Combining Strings and Numbers in JavaScript


To combine strings and numbers, JavaScript will often convert numbers into strings, depending on the following rule.

1. If the first operand (or value) in an expression is a string, JavaScript converts any number into string in the expression and then the plus operator (+) concatenates the strings into a single string. For example, the following expression returns the string 444 for “4” + 4 + 4;.

2. If the first two or more values in an expression are numbers, and the rest of the expression contains a string, JavaScript interpreter first performs the numeric part of the expression and then converts the result into a string.

After conversion, (+) operator concatenates the string values into a single string. For example, the expression (4 + 4 + “4”) returns the string 84 because the result of 4 + 4 is 8, which is then concatenated in a string form to “4”.

Let’s take different examples based on string concatenation and their results.

Example 1:

<script>
  var x, y;
  var result;
    x = 10;
    y = "text";
    result = x + y; // Adding a number and string.
   document.write(result);
</script>
Output:
      10text

Example 2:

<script>
   var x, y, result;
   x = 10; 
   y = "10"; // this variable is a string, not number.
   result = x + y;
   document.write(result);
</script>
Output: 
      1010

Example 3:

<script>
    var x, y, z, result;
     x = 10;
     y = 20;
     z = "text";
     result = x + y + z;
     document.write(result);
</script>
Output:
      30text

Example 4:

<script>
   var x, y, z, result;
   x = 10;
   y = "String";
   z = 50;
   result = x + y + z;
   document.write(result);
</script>
Output:
      10String50

Example 5:

<script>
    var x, y, z, result;
     x = "String";
     y = 20;
     z = 50;
     result = x + y + z;
    document.write(result);
</script>
</body>
Output:
      String2050

Example 6:

<script>
   var x, y, result;
    x = "20";
    y = "50";
   result = x + y;
   document.write(result);
</script>
Output:
      2050

Example 7:

<script>
    var x, y, z, result;
     x = 20;
     y = true; // true is equivalent to 1.
     z = false // false is equivalent to 0.
    result = x + y +z;
   document.write(result);
</script>
</body>
Output:
         21

Example 8:

<script>
    var x, y, z, result;
     x = 20;
     y = true;
     z = "String";
    result = x + y + z;
    document.write(result);
</script>
Output:
       21String

Note: In JavaScript, the plus (+) operator does not convert string values to numeric values. This is because string concatenation operator and plus operator uses the same character (+).


Try It Yourself

Program code 4:

<html>
<body>
  <script>
       var p, q, r, s, t, result;
       p = 10.60;
       q = 20.40;
       r = true;
       s = " I am String ";
       t = false;
       result = p + q + r + s + t;
      document.write(result);
</script>
</body>
</html>

Subtraction Operator (-)

The subtraction operator (-) subtracts one number from another. That is, it subtracts the right number from the left. For example, consider the following program given below:

Program code 5:

<html>
<head>
     <title>Performing a subtraction with - operator</title>
</head>
<body>
  <script>
      var x = 20;
      var y = 30;
      var sub = x - y;
      document.write("Subtraction: " +sub);
   </script>
</body>
</html>
Output:
     Subtraction: -10

As you observe the result, the third statement subtract 30 from 20 and the result -30 is stored into the variable sub.


If either or both of the values in the expression are strings, JavaScript interpreter try to convert strings into numbers. If this conversion is not possible, the value of NaN ( not a number) is returned. Let’s take an example based on this concept.

Program code 6:

<html>
<body>
 <script>
    var x = "40";
    var y = "30";
    var result = x - y;
    document.write("Subtraction: " +result);
  </script>
</body>
</html>
Output:
     Subtraction: 10

Try It Yourself

Program code 7:

<html>
<body>
<script>
    var x = 20;
    var y = "I am String";
    var result = x - y;
    document.write(result);
</script>
</body>
</html>

Multiplication Operator (*)

The multiplication operator multiply the value on right side by the value on left side. When the values on either side of the expression are numbers, they are multiplied together.

When the values in the expression are strings, they are converted into numbers, and then they are multiplied together.

When a number and a string in the expression is being multiplied, the string is converted to a number first and then multiplied by the other number. If this conversion is not possible, the value of NaN is returned.

Let’s take different example programs based on the multiplication.

Program code 8:

<html>
<body>
 <script>
      var x = 20;
      var y = 10.20;
      var result = x * y; // Two variables are multiplied using multiplication operator.
      document.write("Multiplication: " +result);
  </script>
</body>
</html>
Output:
     Multiplication: 204

Program code 9:

<html>
<body>
<script>
     var x = "20";
     var y = "60";
     var result = x * y; // Two variables are multiplied using multiplication operator.
     document.write("Multiplication: " +result);
</script>
</body>
</html>
Output:
       Multiplication: 1200

Try It Yourself

Program code 10:

<html>
<body>
<script>
     var x = 20;
     var y = "Text";
     var result = x * y;
     document.write(result);
</script>
</body>
</html>

Division Operator (/)

The division operator is used to divide one value to another. The value to the left side is called dividend and the value to the right side is called divisor. For example, the code 6/2 means 6 divided by 2 and returns the result of 3.

If either or both of the values are a string, JavaScript interpreter tries to convert the string to a number. If the conversion is not possible, JavaScript interpreter returns NaN.

For example, look at the below code to understand division.

Program code 11:

<html>
<body>
<script>
      var x = 2;
      var y = 3;
      var result = x/y; // Two variables are divided by division operator.
      document.write("Result: " +result);
</script>
</body>
</html>
Output:
     Result: 0.6666666666666666

Try It Yourself

Program code 12:

<html>
<body>
<script>
     var x = '10';
     var y = 'String';
     var result = x/y;
     document.write("Result: " +result);
</script>
</body>
</html>

Modulus Operator (%)

The modulus operator returns the remainder of the division operation of the two values. The sign of the result will be the sign of quotient.

If either or both values in the expression is a string, JavaScript interpreter attempts to convert a string to a number. If the conversion is not possible, NaN is returned.

The following example programs are based on the modulus operator in JavaScript.

Program code 13:

<html>
<body>
  <script>
      var x = 12;
      var y = 5;
      var result = x%y;
      document.write("Result: " +result);
  </script>
</body>
</html>
Output:
       Result: 2

Program code 14:

<html>
<body>
  <script>
       var num1 = 12.12;
       var num2 = "5.5";
       var result = num1 % num2;
       document.write("Result: " +result);
  </script>
</body>
</html>
Output:
       Result: 1.1199999999999992

Let’s write a JavaScript program in which we will perform all mathematical or arithmetic operations using JavaScript mathematical operators. Look at the following script code.

Program code 15:

<html>
<head>
<title>Arithmetic Operators Example Program</title>
</head>
<body>
<script>
   let x = 20;
   let y = 50;
   document.write("x: "+ x, "<br>");
   document.write("y: " +y, "<br>");

   document.write("(x + y): " +(x + y), "<br>");
   document.write("(x - y): " +(x - y), "<br>");
   document.write("(x * y): " +(x * y), "<br>");
   document.write("(x / y): " +(x / y), "<br>");
   document.write("(x % y): " +(x % y));
</script>
</body>
</html>
Output of code:
     x: 20
     y: 50
     (x + y): 70
     (x - y): -30
     (x * y): 1000
     (x / y): 0.4
     (x % y): 20

Precedence of Arithmetic Operators in JavaScript


The combination of variables, constants, and operators as per the syntax of the language is called an arithmetic expression in JavaScript.

It is evaluated from left to right using the rules of precedence of operators if an arithmetic expression has no parentheses.

There are two priority levels of arithmetic operation in JavaScript. They are as follows:

  1. High priority: * / %
  2. Low priority: + –

If there are parentheses in the expression, the expression with parentheses will be assumed with the highest priority.

If two or more sets of parentheses occur into the expression one after another, the order of evaluation will be done from the left set towards the right set.


Let’s take a JavaScript program, in which we will perform mathematical calculation based on the precedence of arithmetic operators.

Program code 2:

<html>
<head>
<title>Precedence of Arithmetic Operators Example</title>
</head>
<body>
<script>
  let x = 2;
  let y = 4;
  let z = 5;
    let exp = x - y/2 + z * 2 - 1;
    document.write("Value of exp: " +exp) ;
</script>
</body>
</html>
Output of code:
          Value of exp: 9

Explanation of exp:

The value of expression exp has been evaluated by the following steps. They are as follows:

exp = 2 – 4/2 + 5 * 2 – 1;

Step 1: exp = 2 – 2 + 5 * 2 – 1 (4/2 evaluated)
Step 2: exp = 2 – 2 + 10 -1 (5*2 evaluated)
Step 3: exp = 12 – 2 -1 (2 + 10 evaluated)
Step 4: exp = 12 – 3 (-2 – 1 evaluated)
Step 5: exp = 9 (12 – 3 evaluated)


Try It Yourself

Program code 3: 

<html>
<head>
<title>Precedence of Arithmetic Operators Example</title>
</head>
<body>
 <script>
   let x = 10;
   let y = 4;
   let z = 5;
     let exp = (x - y)/2 + ((z * 2) - 1)/2;
     document.write("Value of exp: " +exp) ;
 </script>
</body>
</html>

In this tutorial, you learned JavaScript operators and types of operators: arithmetic or mathematical operators with different examples. Hope that you will have understood all the basic points related to operators and solved the following programs.

In the next tutorial, we will discuss assignment operators in JavaScript with different example programs.
Thanks for reading!!!