paint-brush
JavaScript — Back to Basics: Prefix vs. Postfixby@himashi99
14,944 reads
14,944 reads

JavaScript — Back to Basics: Prefix vs. Postfix

by Himashi Hettege DonaApril 15th, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

As much as I want to start using <a href="https://hackernoon.com/tagged/javascript" target="_blank">JavaScript</a> 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 <a href="https://javascript.info" target="_blank">https://javascript.info</a> which has been a great source so far.
featured image - JavaScript — Back to Basics: Prefix vs. Postfix
Himashi Hettege Dona HackerNoon profile picture

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.


SyntaxPostfix 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.


ExamplePrefix


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.


ExamplePrefix



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 now 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, give it a few claps. I would greatly appreciate it!