JavaScript — Back to Basics: Prefix vs. Postfix

Wish me luck, I’m diving into JavaScript!

As much as I want to start using JavaScript right away, and create applications, I know that I won’t be able to fully grasp the language unless I understand the fundamentals. Consequently, I’ve been following the chapters from https://javascript.info which has been a great source so far.

For my own reference, I thought I would write about interesting tidbits I’m learning, or topics I’m struggling with along the way. I hope this will also be of some use to others who are leaning JavaScript as well.

Increment/Decrement

This numerical operation increases or decreases a variable by 1. It’s important to remember that this can only be applied to variables, and applying this operation to numerical values will return an error.

Increment ++: Increases variable by 1
Decrement — — : Decreases variable by 1

The ++ or — — can be applied both before and after the variable. This is where it gets a bit tricky.

Syntax

Postfix Form: counter++
Prefix Form: ++counter

Although both forms increase the variable by 1, there is a difference. The Postfix Form returns the original value of the variable, before the increment/decrement The Prefix Form returns the value after the increment/decrement. This difference can be seen if we are using the returned value of the increment/decrement.

Example

Prefix
let counter = 2;
alert(++counter); //3 incremented value has been returned

Postfix
let counter = 2;
alert(counter++); //2 Returns the original value prior to the increment

If we are using the value of the increment/decrement at a later point in time however, there is no difference between the forms.

Example

Prefix
let counter = 2;
++counter; //3 The incremented value
alert(counter); //3 Incremented value has been returned

Postfix
let counter = 2;
counter++; // 2 The original value
alert(counter); //3 Value has been incremented and returns the new value

It took me a bit of time to wrap my head around this so I hope this was a clear enough explanation.

If you liked this article, click the heart button. I would greatly appreciate it!

Comments

[Nested Software]

As @AndrewBuntine said, this operator seems to originate from the world of C, or maybe even assembly language before that. I am not a big fan of it for general-purpose programming, and probably I would be inclined to suggest counter += 1 as a better idiom than counter++

[Andrew Buntine]

Nice article! This is thanks to C and has always been a gotcha in every language that implemented it.

Although, because of the semantic difference and the confusion it can cause, you will very rarely see auto-increment used inside other expressions in typical industry code - it would never pass a code review. You will see the postfix variant from time to time, but it's typically just run as a single statement on it's own line for the the side-effect (+ 1).

:)

[Himashi Hettege Dona]

@AndrewBuntine @nestedsoftware Thank you for the feedback. It's always interesting to hear how the topics I'm studying are used in the real world!