DEV Community

Himashi Hettege Dona
Himashi Hettege Dona

Posted on

18 3

JavaScript — Back to Basics: Prefix vs. Postfix

abc-building-blocks

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!

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (3)

Collapse
 
nestedsoftware profile image
Nested Software • Edited

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++

Collapse
 
buntine profile image
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).

:)

Collapse
 
himashi99 profile image
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!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay