JavaScript: Arithmetic Special Operators (%, ++, --, - )

Last update on August 19 2022 21:50:38 (UTC/GMT +8 hours)

Arithmetic Special Operators

In addition to four standard arithmetic operators (+, -, *, /), JavaScript provides the following arithmetic operators.

JavaScript Modulus operator (%)

The modulus operator is used as follows:

var1 % var2

The modulus operator returns the first operand modulo the second operand, that is, var1 modulo var2, in the above statement, where var1 and var2 are variables. The modulo function is the integer remainder of dividing var1 by var2. The result will have the same sign as var1.

Example:

HTML Code

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript modules  operator (%) example with DOM</title>
<meta name="description" content="This document contains an example Using JavaScript modules  operator (%) with dom"/>
</head>
<body>
<script src="modules-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var var2 = 78;
var var3 = 545.10;
var var4 = 178.12;
var newvar  = var1 % var2;
var newvar1 = var3 % var4;

var newParagraph = document.createElement("p");
var newText = document.createTextNode("var1 % var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("var3 % var4  = "+ newvar1);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);

View the example in the browser

JavaScript Increment operator (++ )

The increment operator is used as follows:

var1++ ( Post-increment )

++var1 ( Pre-increment )

In the first case (i.e. post-increment) the operator increases the variable var1 by 1 but returns the value before incrementing.

In the second case (i.e. pre-increment) the operator increases the variable var1 by 1 but returns the value after incrementing.

Example :

HTML Code

<!doctype html><head>
<meta charset="utf-8">
<title>JavaScript increment operator example with DOM</title>
<meta name="description" content="This document contains an example of JavaScript increment operator." />
</style>
</head>
<body>
<script src="increment-operator-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var X = 45;

var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("Lets apply the following fourmula X = var1++ [ i.e. Post increment of a variable ]"); 
newParagraph1.appendChild(newText1); 
document.body.appendChild(newParagraph1); 

X=var1++;

var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode("After post-increment value of var1 = "+var1+" and X = "+X); 
newParagraph2.appendChild(newText2); 
document.body.appendChild(newParagraph2); 

var var1 = 45;
var X = 45;

var newParagraph3 = document.createElement("p"); 
var newText3 = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X); 
newParagraph3.appendChild(newText3); 
document.body.appendChild(newParagraph3); 

var newParagraph4 = document.createElement("p"); 
var newText4 = document.createTextNode("Lets apply the following fourmula X =++var1 [ i.e. Pre increment of a variable ]"); 
newParagraph4.appendChild(newText4); 
document.body.appendChild(newParagraph4); 
X=++var1;

var newParagraph5 = document.createElement("p"); 
var newText5 = document.createTextNode("After pre-increment value of var1 = "+var1+" and X = "+X); //creates text along with ouput to be displayed 
newParagraph5.appendChild(newText5); 
document.body.appendChild(newParagraph5);

View the example in the browser

JavaScript: Decrement operator (--)

The decrement operator is used as follows:

var1-- ( Post-decrement )

--var1 ( Pre-decrement )

In the first case (i.e. post-decrement) the operator decreases the variable var1 by 1 but returns the value before decrementing.

In the second case (i.e. pre-decrement) the operator decreases the variable var1 by 1 but returns the value after decrementing.

Example:

HTML Code

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript decrement operator example.</title>
<meta name="description" content="This document contains an example of JavaScript decrement operator." />
</head>
<body>
<script src="decrement-operator-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var X = 0;

var newParagraph = document.createElement("p");
var newText = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("Lets apply the following fourmula X = var1-- [ i.e. Post decrement of a variable ]"); 
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
X=var1--;

var newParagraph2 = document.createElement("p"); 
var newText2 = document.createTextNode("After post-decrement value of var1 = "+var1+" and X = "+X);
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2); 

var var1 = 45;
var X = 0;

var newParagraph3 = document.createElement("p");
var newText3 = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X);
newParagraph3.appendChild(newText3);
document.body.appendChild(newParagraph3); 

var newParagraph4 = document.createElement("p"); 
var newText4 = document.createTextNode("Lets apply the following fourmula X = --var1 [ i.e. Pre decrement of a variable ]"); 
newParagraph4.appendChild(newText4); 
document.body.appendChild(newParagraph4);
X=--var1;

var newParagraph5 = document.createElement("p"); 
var newText5 = document.createTextNode("After pre-decrement value of var1 = "+var1+" and X = "+X); 
newParagraph5.appendChild(newText5);
document.body.appendChild(newParagraph5);

View the example in the browser

JavaScript: - Unary Negation operator

-var1

The unary negation operator changes the sign of var1. When the operator negating a variable, the value of the variable remains unchanged, but the return value is negated.

Example:

HTML Code

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript unary negation operator example.</title>
<meta name="description" content="This document contains an example Using JavaScript unary negation "/>
</head>
<body>
<script src="unary-negation-operator-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var X = 0;
var newParagraph = document.createElement("p");
var newText = document.createTextNode('Initial value of var1 = '+var1+' and X = '+X);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode('Lets apply the unary negation operator in var1 i.e.  X = -var1');
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);

X=-var1;
var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode('After negating the value of var1 = '+var1+' and X ='+X); 
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2);

View the example in the browser

Practice the example online

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.

Previous: avaScript : Arithmetic Operators
Next: JavaScript: Assignment Operators