Understanding increment operators in JS

Olha Halat

·

Follow

Published in

The Startup

·

5 min read

·

May 3, 2020

--

Listen

Share

Recently, I’ve realized that I get easily confused when it comes to increments. So I decided to clarify them for myself once and for all. Also, because nothing helps understanding a concept better than explaining it, I wrote this post.

The increment operator is represented with two plus symbols ++ either right before the operand or after it:

a++++a

Both representations mean that 1 is added to the existing value of a. So, both expressions do at some point result in a = a + 1. However, they do it in a different way.

Some theory

Here is an excerpt from Mozilla Developer Network:

The increment operator increments (adds one to) its operand and returns a value.

• If used postfix, with operator after operand (for example, x++), then it increments and returns the value before incrementing.

• If used prefix, with operator before operand (for example, ++x), then it increments and returns the value after incrementing.

The MDN documentation also gives examples for both. Let’s take a closer look at them.

1. Postfix (post increment)

let x = 3;
let y = x++;

The second expression can be re-written like this:

let y = x;
x = x + 1;

Two things are happening here:

1. y is assigned the current value of x
2. x is redefined (its value increases by 1)

What’s important, they occur in this very order. That’s why, when we log both variables, the output will be the following:

console.log(y);   // Output: 3console.log(x);   // Output: 4

2. Prefix (pre increment)

let a = 2;
let b = ++a;

What’s happening in the second expression is similar to our previous example, but the order is different:

a = a + 1;
let b = a;

1. a is incremented
2. b is assigned the current (incremented) value of a

When we log both variables, the output will be the following:

console.log(a);   // Output: 3
console.log(b);   // Output: 3

Now that we’ve dissected the increments, let’s see if we can solve some problems!

A little practice

5 simple problems

Here are the 5 simple problems. Try to solve them before looking at the answers below.

(1)

let a = 4;
console.log(a++);

(2)

let b = 4;
let c = 6;
let d = ++b * ++c;console.log(d);

(3)

let e = 1;
let f = e;console.log(++e + f++);

(4)

let g = 2;
let h = ++g;console.log(h++ — ++g);

(5)

let j = 3;
let k = 2;
let l = ++k;
l = k + j;console.log(l);

Outputs: 4; 35; 3; -1; 6.

2 more complex problems

One

In this problem, we have x incremented twice in the same expression:

let x = 0;
let y = x++ + x++;console.log(x);
console.log(y);

Here is what happens behind the curtains:

let   y   =   x++   +   x++  ;
               ^         ^
        returns 0      returns 1
 reassigns x to 1      reassigns x to 2

1. The first x++ is evaluated: it returns 0 (the initial value of x) AND saves the incremented value of x into x, which is 1.

2. The second x++ is evaluated: remember, x is now 1, so this value is returned, AND x is further incremented and reassigned.

3. The returned values are added: 0 + 1, the result of 1 is assigned to y.

4. As we remember, x has been incremented twice; its value, as we are logging it, is 2.

console.log(x);  // Output: 2
console.log(y);  // Output: 1

Two

And here another problem that I stumbled upon while doing challenges on SoloLearn (if you don’t have their mobile app yet, I recommend installing it):

for (let x = 0; x <= 8; x++) {
    x += x - x++;
}console.log(x + 1);

Let’s go through it step-by-step together:

1. First, we enter the loop. At this point, 0 is assigned to x.

2. Inside the loop, we can rewrite x += x - x++ as x = x + x - x++.

3. Let's evaluate the expression x + x - x++. We start from left to right:
3.1. The first x (which is evaluated as 0) is added to the second x (which is also evaluated as 0). Their sum is 0.
3.2. Next, we need to subtract x++ from 0.
3.3. Because x++ is an operation itself, it has to be evaluated first. It returns 0 and increments x (x = x + 1).
3.4. We subtract the returned value of x++ from the sum in 3.1. (x + x) and get 0. We assign this value to x.

See what happened here? The incremented value (1) was briefly assigned to x, however, x was overwritten with the result of the expression (0).

This is how I made sense of it:

   x = x + x - x++
       ^   ^   
       0 + 0 - x++
               ^
           0 - 0
               x = 1
   x = 0

But let’s get back to our loop…

4. We increment x to enter the loop again (now, x = 1).

5. Inside the loop, we repeat the procedure from steps 3.1.–3.4., and x is reassigned the value of 1.

6. ...and so on until x = 8.

7. At x = 8, x is reassigned the value of 8 inside the loop and is incremented once again (now, x = 9).

8. This time, we exit the loop because the current value of x doesn't meet the condition x <= 8.

9. As we log x + 1 to the console, we should keep in mind that the current value of x is 9. The output is 10.

Wrapping it up

I really hope that you won’t ever see something like x += x – x++ in real life :) Still, it’s good to know how to read and understand expressions like this.

Let’s sum up with the two rules for increment operators:

The postfix increment (x++) returns the value first (x) and then increments it (x + 1).

The prefix increment (++x) returns the incremented value (x + 1).

P.S. Because the same applies to the decrement operator (-- as a prefix or postfix), I didn’t even mention it.