Increment & Decrement in JavaScript

August 15, 2020

Overview of Increment and Decrement Operators in JavaScript

The Increment and Decrement Operators are used to increase or decrease the value by 1.

For example:

Incremental operator ++ is used to increase the existing variable value by 1 (x = x + 1).

The decrement operator – – on the other hand is used to decrease or subtract the existing value by 1 (x = x – 1).

JavaScript Prefix and Postfix

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.

Prefix and Postfix Example

The ++ or — —can be applied both before and after the variable. This is where it gets a bit tricky.

Syntax

Postfix Form: counter++

Prefix Form: ++counter

Although both forms increase the variable by 1, there is a difference:

🛑 The Postfix Form returns the original value of the variable, before the increment/decrement

🛑 The Prefix Form returns the value after the increment/decrement.

This difference can be seen if we are using the returned value of the increment/decrement.

Example

Prefix

let counter = 2
alert(++counter) // 3 incremented value has been returned

Postfix

let counter = 2
alert(counter++) // 2 Returns the original value prior to the increment

If we are using the value of the increment/decrement at a later point in time however, there is no difference between the forms.

Example

Prefix

let counter = 2
++counter // 3 The incremented value
alert(counter) // 3 Incremented value has been returned

Postfix

let counter = 2
counter++ // 2 The original value
alert(counter) // 3 Value has now been incremented and returns the new value

In the prefix version (++i), the value of iis incremented, and the value of the expression is the new value of i.

In the postfix version (i++), the value of i is incremented, but the value of the expression is the original value of i.

Let's analyze the following code line by line:

int i = 10;   // (1)
int j = ++i;  // (2)
int k = i++;  // (3)
  1. i is set to 10 (easy).
  2. two things on this line:
  3. i is incremented to 11.
  4. The new value of i is copied into j. So j now equals 11.
  5. -
  6. Two things on this line as well:
  7. i is incremented to 12. The original value of i(which is 11) is copied into k. So k now equals 11.

👉 So after running the code, i will be 12 but both j and k will be 11.

The same stuff holds for postfix and prefix versions of --.

Another example

let var1 = 5,
  var2 = 5

// var1 is displayed
// Then, var1 is increased to 6
console.log(var1++)

// var2 is increased to 6
// Then, var2 is displayed
console.log(++var2)
// output of the program: 5,6

Up next