Start learning free

LESSON 27 OF 410 · CALCULATIONS WITH NUMBERS

Increment and Decrement Operators in JavaScript: ++ 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

    JAVASCRIPT · CALCULATIONS WITH NUMBERS

    Increment And Decrement Operators in JavaScript, explained

    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:

    1. Declare number with let and set it to 18. It has to be let, because ++ and -- reassign the variable.
    2. Apply number++ on its own line. The value becomes 19. The result of the expression is ignored.
    3. Create post with number++. post receives the old value, 19, and then number becomes 20.
    4. Create pre with ++number. number becomes 21 first, and pre receives 21.
    5. Apply the prefix decrement --number. number goes 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++;, x is still 5. The increment happens, but then the old value, 5, is stored over it. Writing just x++; is enough.
    • Using the wrong form inside an expression. With let i = 1;, the expression i++ + ++i evaluates to 4 (1, then 3) and leaves i at 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++] and arr[++k] read different elements, as shown above.
    • Using const. A counter has to be declared with let.

    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 with let (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.
    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free