What the operators do
The increment operator ++ adds 1 to a variable, and the decrement operator -- subtracts 1. They are shorthand for the two assignments you would otherwise write by hand:
let number = 10;
number++; // same as number += 1
console.log(number); // 11
number--; // same as number -= 1
console.log(number); // 10
They are used constantly for counters and for loop variables, as in for (let i = 0; i < 5; i++). The operand must be something you can assign to, such as a variable, an object property (counter.count++) or an array element (arr[0]++). Writing 5++ is a SyntaxError, and so is incrementing a variable declared with const, which throws TypeError: Assignment to constant variable.
Postfix and prefix forms
Each operator has two forms, and the difference matters whenever the result of the expression is used. Every ++ and -- expression does two things: it changes the variable, and it produces a value. The forms change the variable in the same way but produce different values.
- Postfix (
number++, operator after the variable) produces the value before the change. - Prefix (
++number, operator before the variable) produces the value after the change.
let number = 10;
let oldNumber = number++;
console.log(oldNumber); // 10
console.log(number); // 11
let newNumber = ++number;
console.log(newNumber); // 12
console.log(number); // 12
The first form is the same as let oldNumber = number; number += 1;. The prefix form is the same as number += 1; let newNumber = number;. The decrement operator follows the same rule: let a = x-- stores the old value of x, and let b = --x stores the new one.
Written as a statement on its own line, the two forms are interchangeable, because nobody looks at the produced value. The difference only shows when the expression sits inside something larger: an assignment, a function argument or an array index.
const arr = [10, 20, 30];
let k = 0;
console.log(arr[k++]); // 10 (reads index 0, then k becomes 1)
console.log(arr[k++]); // 20
console.log(k); // 2
let j = 0;
console.log(arr[++j]); // 20 (k becomes 1 first, then reads index 1)
The exercise, step by step
The lesson walks through both forms on one variable and ends with the decrement operator. Follow the value of number after each line:
- Declare
numberwithletand set it to 18. It has to belet, because++and--reassign the variable. - Apply
number++on its own line. The value becomes 19. The result of the expression is ignored. - Create
postwithnumber++.postreceives the old value, 19, and thennumberbecomes 20. - Create
prewith++number.numberbecomes 21 first, andprereceives 21. - Apply the prefix decrement
--number.numbergoes from 21 to 20.
let number = 18;
number++;
let post = number++;
let pre = ++number;
--number;
At the end, number is 20, post is 19 and pre is 21. If you print the three values with console.log(number, post, pre), you see 20 19 21.
Common mistakes
- Assigning a postfix result back to the same variable. After
let x = 5; x = x++;,xis still 5. The increment happens, but then the old value, 5, is stored over it. Writing justx++;is enough. - Using the wrong form inside an expression. With
let i = 1;, the expressioni++ + ++ievaluates to 4 (1, then 3) and leavesiat 3. Code that mixes several increments of one variable in one expression is hard to read. Put each change on its own line. - Counting off by one with the array index.
arr[k++]andarr[++k]read different elements, as shown above. - Using
const. A counter has to be declared withlet.
Other values the operators accept
The operators always convert their operand to a number first (or to a BigInt, if the value is one). A numeric string works: let s = "5"; s++; makes s the number 6, not the string "6". Note that "5" + 1 gives "51", so ++ differs from adding 1 here. A value that is not numeric turns into NaN: an uninitialized let u; u++; leaves u as NaN. Decimals work as expected, and 1.5 incremented is 2.5. For a BigInt, let b = 10n; b++; gives 11n.
Past Number.MAX_SAFE_INTEGER (9007199254740991), incrementing stops being reliable, because JavaScript numbers are 64-bit floating-point values. Starting from that value, two increments give 9007199254740992, not 9007199254740993.
Key takeaways
++adds 1 and--subtracts 1. They need a variable declared withlet(or an assignable property).- Postfix (
x++) gives the old value, prefix (++x) gives the new one. Either way, the variable ends up changed. - Alone on a line, both forms do the same thing.
- Keep an increment out of larger expressions unless you need its value, and never mix several changes to one variable in a single expression.
