Start learning free

LESSON 28 OF 348 · CALCULATIONS WITH NUMBERS

Increment and Decrement Operators in TypeScript: ++ and --

Lesson Read the full explanation

In programming, increasing the value of a variable by 1 is so common, there is an operator designed to do that.

That operator is the increment operator (++):

let number = 10;
number++; // short for number += 1

console.log(number); // Output: 11

There is also one such operator for decreasing the value of a variable by 1.

That operator is the decrement operator (--):

let number = 10;
number--; // short for number -= 1

console.log(number); // Output: 9

Postfix:

In the examples above, we have used these two operators in their postfix form, with operator (++) after operand (number) such as number++.

If used postfix, the increment operator increments and returns the value before incrementing:

let number = 10;

let oldNumber = number++;

console.log(oldNumber); // Output: 10
console.log(number); // Output: 11

This code first assigns the value of number (which is 10) to oldNumber and then increments number (making it 11). It's equivalent to this:

let oldNumber = number;
number++;

Prefix:

However, there is also the prefix form, with operator before operand (for example, ++number).

When used prefix, the increment operator increments and returns the value after incrementing:

let number = 10;

let newNumber = ++number;

console.log(newNumber); // Output: 11
console.log(number); // Output: 11

This code first increments number (making it 11) and then assigns the new value of number to oldNumber (making it 11). It's equivalent to this:

number++;
let newNumber = number;

Here's an example with the decrement operator:

let number = 10;

let newNumber = --number;

console.log(newNumber); // Output: 9
console.log(number); // Output: 9

Assignment
Follow the Coding Tutorial and let's practice with these operators!


Hint
Look at the examples above if you get stuck.


STEP 1 OF 5
    Ctrl + Enter to check

    TYPESCRIPT · CALCULATIONS WITH NUMBERS

    Increment And Decrement Operators in TypeScript, explained

    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.

    1. Declare number with let and the value 18. The operators reassign the variable, so const would not work.
    2. Increment it on its own line. Now number is 19.
    3. Declare post as number++. The postfix form hands back the old value, so post becomes 19 while number becomes 20.
    4. Declare pre as ++number. The prefix form increments first, so number becomes 21 and pre is 21 too.
    5. Decrement number with 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 expression x++ + x is 10 + 11, which is 21, because x changes between the two reads. With let z = 10;, ++z + z is 11 + 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 variable t is still 5. The increment happens, but then the old value is stored over it. Writing just t++; is what you want.
    • Applying them to a constant or a literal. const k = 1; k++; and 5++ are both errors, because there must be a variable to change. For the constant, the compiler reports that k can't be assigned, and the JavaScript it writes then stops with TypeError: Assignment to constant variable. when it reaches k++.
    • Numbers only. The compiler reports an error for ++ on a variable typed string: with let s: string = "5"; s++; it reports that an arithmetic operand must be of type number.

    Key takeaways

    • x++ means x += 1 and x-- means x -= 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.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free