JavaScript - Arithmetic Operators

JavaScript Arithmetic Operators

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 103
var 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>

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.

20 - 10; // returns 10
'20' - 10; // returns 10
'20' - '10'; // returns 10
'20ee' - 10; // returns NaN
NaN - 10 // return NaNs
Infinity - 10 // returns infinity

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>

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>

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 2
20/-10 // return -2
100/0  // returns Infinity
0/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>

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. Let’s 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;
      document.write(x +"</br>");
      document.write(y +"</br>");
      document.write(z +"</br>");
      document.write(a +"</br>");
      document.write(b +"</br>");
   </script>
  </body>
</html>

JavaScript Increment (++) Operator

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.

Let’s look at the following example −

<html>
<body>
   <script>
      var x = 10;
      var y = --x;  //prefix decrement
      var 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>

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.

Let’s look at the following example −

<html>
<body>
   <script>
      var x = 10;
      var y = --x;  //prefix decrement
      var 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>