What ++ and -- do
Raising a variable by 1 is so common that TypeScript has an operator for it. The increment operator ++ is short for += 1, and the decrement operator -- is short for -= 1:
let number = 10;
number++;
console.log(number); // 11
number--;
console.log(number); // 10
Both change the variable they are applied to, so it must be declared with let. A const variable can't be incremented.
Postfix and prefix forms
Each operator has two forms. In the postfix form the operator comes after the variable (number++), and in the prefix form it comes before (++number). On a line of their own they do the same thing. The difference shows only when the value of the expression is used, for example when it is assigned to another variable.
- Postfix increments the variable but gives back the value it had before.
- Prefix increments the variable and gives back the value it has after.
let a = 10;
let oldValue = a++;
console.log(oldValue); // 10
console.log(a); // 11
let b = 10;
let newValue = ++b;
console.log(newValue); // 11
console.log(b); // 11
The postfix line is the same as copying first and incrementing after: let oldValue = a; a++;. The prefix line increments first and copies after: b++; let newValue = b;. The decrement operator follows the same rules, so let c = 10; let d = --c; leaves both at 9.
The exercise, step by step
The lesson builds one variable, number, and records what each form produces.
- Declare
numberwithletand the value 18. The operators reassign the variable, soconstwould not work. - Increment it on its own line. Now
numberis 19. - Declare
postasnumber++. The postfix form hands back the old value, sopostbecomes 19 whilenumberbecomes 20. - Declare
preas++number. The prefix form increments first, sonumberbecomes 21 andpreis 21 too. - Decrement
numberwith the prefix--on its own line. It goes back to 20. Because the result isn't used, the prefix and postfix forms would behave the same here.
The solution in TypeScript
let number = 18;
number++;
let post = number++;
let pre = ++number;
--number;
After all five lines, number is 20, post is 19 and pre is 21. Printing them with console.log(number, post, pre) shows 20 19 21.
TypeScript infers the type number for each variable from its starting value, so the lesson doesn't need annotations here. The types are only for the compiler and are erased in the generated JavaScript.
Where you will use them
The most common home for ++ is a counter that goes up each time something happens: a count of items seen, a score, or the index of a loop. Later in the course, loops use it constantly, for example i++ to move to the next position. In all of those the result is not used, so the postfix form on its own line is the usual choice. The prefix form earns its place when you want the new value straight away, such as an id that must be one higher than the last one.
Gotchas
- Using the value in a bigger expression. The variable is read and changed in a specific order. With
let x = 10;, the expressionx++ + xis10 + 11, which is 21, becausexchanges between the two reads. Withlet z = 10;,++z + zis11 + 11, which is 22. Expressions like these are hard to read, so prefer putting the increment on its own line. - Assigning a postfix result back to the same variable. After
let t = 5; t = t++;the variabletis still 5. The increment happens, but then the old value is stored over it. Writing justt++;is what you want. - Applying them to a constant or a literal.
const k = 1; k++;and5++are both errors, because there must be a variable to change. For the constant, the compiler reports thatkcan't be assigned, and the JavaScript it writes then stops withTypeError: Assignment to constant variable.when it reachesk++. - Numbers only. The compiler reports an error for
++on a variable typedstring: withlet s: string = "5"; s++;it reports that an arithmetic operand must be of typenumber.
Key takeaways
x++meansx += 1andx--meansx -= 1.- Postfix (
x++) gives the old value; prefix (++x) gives the new one. - On a line of their own, both forms have the same effect.
- Keep the increment on its own line unless you really need the value.