Increment and Decrement Operators in JavaScript

The JavaScript Increment and Decrement Operators are useful to increase or decrease the value by 1. For instance, Incremental operator ++ is used to increase the existing variable value by 1 (x = x + 1). The decrement operator – – is used to decrease or subtract the existing value by 1 (x = x – 1).

The syntax for both the increment and decrement operators in JavaScript is as shown below.

  • Increment Operator : ++x or x++
  • Decrement Operator: –x or x–

Increment and Decrement Operators in JavaScript Example

In this example, we show you the working functionality of Increment and Decrement Operators in this programming language.

<!DOCTYPE html>

<html>
<head>
    <title> Increment and Decrement Operators </title>
</head>

<body>
<script>
   let x = 10, y = 20;
   document.write("<b>----INCREMENT OPERATOR EXAMPLE---- </b>");
   document.write("<br \> Value of x : "+ x); //Original Value
   document.write("<br \> Value of x : "+ x++); // Using increment Operator
   document.write("<br \> Value of x : "+ x + "<br \>"); //Incremented value
    
   document.write("<br \> <b>----DECREMENT OPERATOR EXAMPLE---- </b>");
   document.write("<br \> Value of y : "+ y); //Original Value
   document.write("<br \> Value of y : "+ y--); // using decrement Operator
   document.write("<br \> Value of y : "+ y); //decremented value   
</script>
</body>
</html>
Increment and Decrement Operators in JavaScript example

At Line 13 we used increment operator. So the value of the X is returned first (i.e, 10) then X value was incremented by 1.

Line 14: We called the X value again, and it was displaying 11 because the value is updated already. Same with the decrement operator.

Difference between Prefix and Postfix in JavaScript

If you observe the above syntax, we can assign the JavaScript increment and decrement operators either before operand or after the operand. When ++ or — is used before operand like: ++x, –x then we call it as prefix, if ++ or — is used after the operand like: x++ or x– then we called it as postfix.

Let’s explore the JavaScript prefix and postfix.

  1. ++i (Pre increment): It will increment the value of i even before assigning it to the variable i.
  2. i++ (Post-increment): The operator returns the variable value first (i.e, i value) then only i value will incremented by 1.
  3. –i (Pre decrement): It decrements the value of i even before assigning it to the variable i.
  4. i– (Post decrement): The JavaScript operator returns the variable value first (i.e., i value), then only i value decrements by 1.

JavaScript Prefix and Postfix Example

This example will show you, How to use Increment and Decrement Operators as the Prefix and Postfix in JavaScript 

<!DOCTYPE html>
<html>
<head>
    <title> javascript prefix and Postfix </title>
</head>
<body>
<script>
   var x = 10, y = 20, a = 5, b= 4;
   document.write("<b>----PRE INCREMENT OPERATOR EXAMPLE---- </b>");
   document.write("<br \> Value of X : " + x); //Original Value
   document.write("<br \> Value of X : "+ (++x)); // Using increment Operator
   document.write("<br \> Value of X Incremented: " + x + "<br \>"); //Incremented value
   
   document.write("<br \> <b>----POST INCREMENT OPERATOR EXAMPLE---- </b>");
   document.write("<br \> Value of Y : "+ y); //Original Value
   document.write("<br \> Value of Y : "+ y++); // Using increment Operator
   document.write("<br \> Value of Y Incremented: "+ y + "<br \>"); //Incremented value
    
   document.write("<br \> <b>----PRE DECREMENT OPERATOR EXAMPLE---- </b>");
   document.write("<br \> Value of A : "+ a); //Original Value
   document.write("<br \> Value of A : "+ --a); // using decrement Operator
   document.write("<br \> Value of A Decremented: "+ a + "<br \>"); //decremented value
    
   document.write("<br \> <b>----POST DECREMENT OPERATOR EXAMPLE---- </b>");
   document.write("<br \> Value of B : "+ b); //Original Value
   document.write("<br \> Value of B : "+ b--); // using decrement Operator
   document.write("<br \> Value of B Decremented: "+ b + "<br \>"); //decremented value 
</script>
</body>
</html>
----PRE INCREMENT OPERATOR EXAMPLE----
Value of X : 10
Value of X : 11
Value of X Incremented: 11

----POST INCREMENT OPERATOR EXAMPLE----
Value of Y : 20
Value of Y : 20
Value of Y Incremented: 21

----PRE DECREMENT OPERATOR EXAMPLE----
Value of A : 5
Value of A : 4
Value of A Decremented: 4

----POST DECREMENT OPERATOR EXAMPLE----
Value of B : 4
Value of B : 4
Value of B Decremented: 3

Increment and Decrement operators in this programming are used in For Loop, While loop, and Do While loops. Try to learn the idea of the prefix and postfix so that you can understand if, for loop, while loop, and do-while loop syntax are easy.

What is the difference between i++ and ++i in JavaScript?

Both ++i (prefix) and i++ (postfix) are helpful to increment the counter value by 1.

  • ++i (Prefix): After incrementing the value by 1, it returns the value.
  • i++ (Postfix): First, it returns the value and then increments the value by 1.

Example of ++i

let x = 10;
let y = ++x;
console.log(x, y);
11, 11

Example of i++

let x = 10;
let y = x++;
console.log(x, y);
11, 10

JavaScript increment by 2

Generally, the x++ operator increments the value of the counter variable by 1. However, we can use the technique below (arithmetic assignment operator) to increment the value by 2 or N.

let x = 10;
x += 2
console.log(x);
12

JavaScript string increment operator

If the given string is a numeric value, JavaScript will typecast the string to numeric value and increment or decrement the value.

let x = "100";
console.log(++x);
101

However, if we use a string that can’t be converted to a number, it returns NaN.

let x = "Hi";
++x;
console.log(x);
NaN

JavaScript increment while loop

The increment operator inside the while loop allows the incrementing counter variable to avoid infinity loop. Failing to use the increment or decrement operator inside a while loop leads to infinity loop.

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}
1
2
3
4
5

JavaScript decrement for loop

If we use the decrement operator inside a for loop, it will move the counter variable towards 0. On each iteration, it decrements the counter value by 1 and moves towards 0.

for (let i = 5; i > 0; i--)
{
    console.log(i)
}
5
4
3
2
1

Why does const not work with the increment operator?

As we all know, the increment and decrement operators change the original variable value. However, const means it does not allow any changes to the original value. So, const won’t allow ++ or – operations on it.

TIP: Replace the const keyword with let, and the code below works seamlessly.

const a = 10;
a++;
console.log(a);
TypeError: Assignment to constant variable.