Increment (++) and Decrement (–) Operator in JavaScript

JavaScript has two important operators, ie, increment and decrement operators. Increment and Decrement Operator in JavaScript increases and decreases the value of any variable by 1 respectively.

Increment and Decrement Operator in JavaScript

The incremental operator increases the value of a variable, for instance, x, by 1, ie, it is x = x – 1. Also, the decrement operator decreases the value of a variable, for instance, x, by 1, ie, it is x = x –  1. Increment (++) and Decrement (–) Operator in JavaScript has two syntaxes for them as given below.

  • ++x/x++ for Increment and
  • –x/x– for Decrement

Prefix and Postfix:

When Increment (++) and Decrement (–) Operator in JavaScript are used before operand, for instance, ++x or –x, it is called JavaScript Prefix. While when they are used after the operand, for instance, x++ or x–, it is called JavaScript Postfix.

Let’s have a look at the JavaScript Prefix and Postfix in detail.

  • ++x (Pre-increment) increases the value of x even before assigning it to the variable x while  –x (Pre-decrement) decreases the value of x even before assigning it to the variable x.
  • x++ (Post-increment) returns the value of the variable x first, after that the value of x  is incremented by 1 while x–(Post-decrement) returns the value of the variable x first, after that the value of x is decremented by 1.

Sample Code:

Below is a very easy showcase example of implementation of Increment (++) and Decrement (–) Operator in JavaScript(JS).

// the JavaScript part of the HTML page 
<script> 
// declaring variables in JavaScript for the operations. 
var x = 1, y = 2, a = 3, b= 4; 
// Pre Increment Operation 
document.write("<br\> <b> : The Pre Increment Operator : </b>"); 
document.write("<br\> Original value of x : " + x); 
document.write("<br\> Modified value of x : "+ (++x)); 
document.write("<br\> Hence, value of the incremented x : " + x + "<br\>"); 
// Post Increment Operation 
document.write("<br\> <b> : The Post Increment Operator : </b>"); 
document.write("<br\> Original value of y : "+ y); 
document.write("<br\> Modified value of y : "+ y++); 
document.write("<br\> Hence, value of the incremented y : "+ y + "<br\>"); 
// Pre Decrement Operation 
document.write("<br\> <b> : The Pre Decrement Operator : </b>"); 
document.write("<br\> Original value of a : "+ a); 
document.write("<br\> Modified value of a : "+ --a); 
document.write("<br\> Hence, value of the decremented a : "+ a + "<br\>"); 
// Post Decrement Operation 
document.write("<br\> <b> : The Post Decrement Operator : </b>"); 
document.write("<br\> Original value of b : "+ b); 
document.write("<br\> Modified value of b : "+ b--); 
document.write("<br\> Hence, value of the decremented b : "+ b + "<br\>"); 
</script>

Output:

Below is the output of the above JS code.

: The Pre Increment Operator :
Original value of x : 1
Modified value of x : 2
Hence, value of the incremented x : 2

: The Post Increment Operator :
Original value of y : 2
Modified value of y : 2
Hence, value of the incremented y : 3

: The Pre Decrement Operator :
Original value of a : 3
Modified value of a : 2
Hence, value of the decremented a : 2

: The Post Decrement Operator :
Original value of b : 4
Modified value of b : 4
Hence, value of the decremented b : 3

Know more: JavaScript Recursion with examples

Leave a Reply

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