DEV Community

ABISHEK M
ABISHEK M

Posted on

Increment and Decrement Operators in JavaScript

Introduction

In JavaScript, we often need to increase or decrease a value by 1. For example, a game score may increase from 10 to 11, or the number of available seats may decrease from 10 to 9.

JavaScript provides two operators for this:

++ → Increment
-- → Decrement
Enter fullscreen mode Exit fullscreen mode

Increment increases a value by 1, while decrement decreases a value by 1.


How Increment and Decrement Work

The basic idea is simple:

++ → Add 1
-- → Subtract 1
Enter fullscreen mode Exit fullscreen mode

For example:

let x = 10;

x++; // 10 → 11
x--; // 11 → 10
Enter fullscreen mode Exit fullscreen mode

Both operators can be placed before or after a variable. Their position determines when the value is used.

POST → Use the value first, then change it
PRE  → Change the value first, then use it
Enter fullscreen mode Exit fullscreen mode

This gives us four operators:

x++ → Use → +1
++x → +1 → Use

x-- → Use → -1
--x → -1 → Use
Enter fullscreen mode Exit fullscreen mode

Increment Operator ++

1. Post-Increment x++

Post-increment uses the old value first, then increases the variable by 1.

let x = 5;

let y = x++;

console.log(x);
console.log(y);
Enter fullscreen mode Exit fullscreen mode

Output:

6
5
Enter fullscreen mode Exit fullscreen mode

Here, y gets the old value 5, and then x becomes 6.

Think of a ticket counter: give the current ticket number first, then move to the next number.


2. Pre-Increment ++x

Pre-increment increases the value first, then uses the new value.

let x = 5;

let y = ++x;

console.log(x);
console.log(y);
Enter fullscreen mode Exit fullscreen mode

Output:

6
6
Enter fullscreen mode Exit fullscreen mode

Here, x first changes from 5 to 6, and then y receives 6.


Decrement Operator --

1. Post-Decrement x--

Post-decrement uses the old value first, then decreases the variable by 1.

let x = 5;

let y = x--;

console.log(x);
console.log(y);
Enter fullscreen mode Exit fullscreen mode

Output:

4
5
Enter fullscreen mode Exit fullscreen mode

Here, y gets 5, and then x becomes 4.


2. Pre-Decrement --x

Pre-decrement decreases the value first, then uses the new value.

let x = 5;

let y = --x;

console.log(x);
console.log(y);
Enter fullscreen mode Exit fullscreen mode

Output:

4
4
Enter fullscreen mode Exit fullscreen mode

Here, x first changes from 5 to 4, and then y receives 4.


Easy Way to Remember

You don't need to memorize four separate definitions. Remember these two rules:

POST → USE FIRST
PRE  → CHANGE FIRST
Enter fullscreen mode Exit fullscreen mode

And:

++ → Increase by 1
-- → Decrease by 1
Enter fullscreen mode Exit fullscreen mode

Therefore:

x++ → Use → +1
++x → +1 → Use

x-- → Use → -1
--x → -1 → Use
Enter fullscreen mode Exit fullscreen mode

Increment and Decrement in Real Programs

These operators are commonly used with counters and loops.

for (let i = 0; i < 5; i++) {
    console.log(i);
}
Enter fullscreen mode Exit fullscreen mode

Output:

0
1
2
3
4
Enter fullscreen mode Exit fullscreen mode

Here, i++ increases the counter after each iteration.

Understanding these operators is also important for JavaScript interviews, especially output-based questions involving expressions, conditions, and loops.

Increment and decrement operators provide a short way to increase or decrease values by 1.

The most important rule to remember is:

POST → Use first
PRE  → Change first

++ → Increase
-- → Decrease
Enter fullscreen mode Exit fullscreen mode

Once you understand this rule, you can easily understand all four operators:

x++   ++x
x--   --x
Enter fullscreen mode Exit fullscreen mode

Top comments (0)