Difference between ++ and +=1 in javascript

Question

Could somebody explain why the following functions give different results. The first does not seem to work, but the second does. I'm puzzled because I thought +=1 and ++ did the same thing.

(I'm not intending to actually use this code, it's just to demonstrate the difference).

/*function 1*/
function incrementIfZero1(base,element) {

    if (element == 0) {
        return base++;
    }
    else
    {
        return base;
    }
};


/*function 2*/
function incrementIfZero2(base,element) {

    if (element == 0) {
        return base+=1;
    }
    else
    {
        return base;
    }
};

incrementIfZero1(1,0) /* -> 1*/
incrementIfZero2(1,0) /* -> 2*/

Any help is very much appreciated.

Thanks,

Robin

[Edit:]

Thank you for your replies, it makes sense now. I had also tried the following statement, which resulted in the same thing as function 1:

return (base++)

I'm now surprised that this doesn't give the same result as function 2 - I would have expected the brackets to 'force' it to be evaluated before returning. Any idea why this is not the case?

Solution 1

when you return base++ it returns the value of base just before it gets incremented. You want to do ++base to make sure the increment happens first then it gets returned

otherwise ++ is the same as +=1

[edit] in response to your edit, i tried wrapping random statements in parentheses and most mathematical operators respond as expected, this incrementation seems to be exempt, likely because the syntax of pre-incrementation vs post-incrementation is highly intentional and the statement itself returns a specific value regardless of whether or not you wrap it in parentheses

Solution 2

return (base++)

I'm now surprised that this doesn't give the same result as function 2 - I would have expected the brackets to 'force' it to be evaluated before returning. Any idea why this is not the case?

The increment operation is evaluated, regardless of the brackets. The catch here is that expressions in JavaScript always result in a value, which is then returned. For example, when you do var x = 2 + 2, 2 + 2 is evaluated, then "returned" to the = operator, which then assigns that value to x. The ++ postfix operator (as in base++) works differently: it does increment the variable preceding it, but the expression returns the value before incrementation. The prefix increment operator, on the other hand, works as you want, ++base returns the value after incrementing it.

Solution 3

You are returning base++. This is the postfix increment, thus, the increment is handled after the return. For this specific case, return ++base; would be correct

Solution 4

return base++;

Is post-increment. It increments the value held by base, and then returns the original value before the increment happened.

return base += 1;

Adds one to base, and then returns base. This is a pre-increment. This can also be written as:

return ++base;

Solution 5

Warning! There's a difference when two different types, a string and a number, are mutated using ++ and +=:

When count is a string, count += 1 seems to do type conversion and converts the 2nd number to a string, whereas count++ takes the string count argument, converts to a number, and increments by 1.

let count = process.argv[2]

while (count < 5) {
  console.log('Inside of the loop. Count is', count)
  count += 1 // NOT likely what you want! Now, try it with count++
}

console.log('Outside of loop. Count is', count)

Another example:

> let num = '2'
undefined
> num++
2
> num
3

// VS using +=

> let num2 = '2'
undefined
> num2 += 1
'21'
> num2
'21'

View more solutions