Increment and decrement

JavaScriptJunior~3 min read

The ++ and -- operators are increment and decrement: they raise or lower a variable's value by one. The confusion comes not from the action itself but from the difference between the prefix form (++i) and the postfix form (i++), because that decides which value the expression returns.

Theory

TL;DR

++ increases a variable by 1, -- decreases it by 1.
The prefix form ++i changes the variable first, then returns the new value.
The postfix form i++ returns the old value first, then changes the variable.
The variable itself changes identically in both cases, only the returned value differs.
In for (let i = 0; i < 5; i++) there is no difference, because the value of the expression is unused.
The operators work only on variables and properties, they cannot be applied to a literal.

Quick example

javascript

let a = 1;
console.log(a++); // 1, prints first, then increments
console.log(a);   // 2

let b = 1;
console.log(++b); // 2, increments first, then prints
console.log(b);   // 2

What the `++` and `--` operators do

Operator	Action	Example
`++`	increases the variable's value by 1	`i++` means `i = i + 1`
`--`	decreases the variable's value by 1	`i--` means `i = i - 1`

Important: depending on the position (++i or i++) the result of the expression can be different.

The prefix form (`++i`, `--i`)

It first changes the variable's value and then returns the new value.

javascript

let i = 5;
let result = ++i; // first i becomes 6, then 6 is returned

console.log(i);      // 6
console.log(result); // 6

In other words:

It increments or decrements the variable.

It returns the new value.

The postfix form (`i++`, `i--`)

It first returns the old value and then changes the variable.

javascript

let i = 5;
let result = i++; // first it returns 5, then it raises i to 6

console.log(i);      // 6
console.log(result); // 5

In other words:

It returns the old value.

Only after that does it change the variable.

The difference inside expressions

It is especially visible when the operator is used inside a larger expression:

javascript

let x = 10;
let y = x++ + 5; // y = 10 + 5 = 15, then x = 11

let a = 10;
let b = ++a + 5; // a = 11, b = 16

Form	Change to the variable	Returned value
`++i`	Increments immediately	The new value
`i++`	Increments afterwards	The old value
`--i`	Decrements immediately	The new value
`i--`	Decrements afterwards	The old value

In loops

Loops normally use the i++ form, because the value of the expression is not needed:

javascript

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

There is no difference between i++ and ++i here, because the returned value is never used.

Summary table

Form	When it changes	What it returns	Example result
`++i`	Immediately	The new value	`let i = 1; console.log(++i)` gives `2`
`i++`	Afterwards	The old value	`let i = 1; console.log(i++)` gives `1`
`--i`	Immediately	The new value	`let i = 3; console.log(--i)` gives `2`
`i--`	Afterwards	The old value	`let i = 3; console.log(i--)` gives `3`

Common mistakes

Using i++ where the new value is needed. const next = i++ stores the old number, and the bug only shows up in edge cases.
Combining an increment with the same variable in one expression. Lines like i = i++ + ++i are formally valid but unreadable, and different people will read them differently.
Applying the operator to a const. const i = 0; i++ throws a TypeError, because reassigning a constant is not allowed.
Expecting a literal or a function call to change. 5++ and getValue()++ are syntax errors: the operand must be a variable or a property, such as counter.value++.
Forgetting type coercion. let s = '5'; s++ produces the number 6, because the operator coerces the operand to a number first, while let t = 'abc'; t++ produces NaN.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.