x++ vs ++x

x++ vs ++x

I am good at web development and script languages. So, I discuss the incremental dilemma in my way. Hope it might help.

Prefix: ++someNum
Postfix: someNum++

At first glance, it may seem like a syntactic preference; similar to that of generators, where you can define one by writing:

function* generator() {} or function *generator() {}

Contrary to intuition, there are subtle differences in how each works, specifically in what each returns. Both operators still do what their syntax implies: to increment. Regardless of prefix or postfix, the variable is sure to be incremented by 1. The difference between the two lies in their return values. The prefix increment returns the value of a variable after it has been incremented. On the other hand, the more commonly used postfix increment returns the value of a variable before it has been incremented.


// Prefix increment

let prefix = 1;

console.log(++prefix); // 2

console.log(prefix); // 2



// Postfix increment

let postfix = 1;

console.log(postfix++); // 1

console.log(postfix); // 2

To remember this rule, I think about the syntax of the two. When one types in the prefix increment, one says ++x. The position of the ++ is important here. Saying ++x means to increment (++) first then return the value of x, thus we have ++x. The postfix increment works conversely. Saying x++ means to return the value of x first then increment (++) it after, thus x++.

• When do I use one over the other?

_It really depends on you, the programmer. At the end of the day, all we really want from the increment operator is to increment a variable by 1. If you are still concerned about their differences, there are some cases when one can be used over the other to write simpler code. For example, consider the following situation. A button with an ID of counter counts how many times it has been pressed. It changes the innerHTML of a span with an ID of displayPressCount according to the number of times the button has been pressed. The common approach is to attach a click listener that increments some global variable.


// Global variable that counts how many times the button has been pressed

let numberOfPresses = 0;



// Stores necessary HTML elements

const button = document.getElementById('counter');

const span = document.getElementById('displayPressCount');



// Event handler

function clickHandler() {



  // Increment counter

  numberOfPresses++;

  span.innerHTML = numberOfPresses;

}



// Attach click listener to button

button.addEventListener('click', clickHandler);

Now, let's switch our focus to the clickHandler. Notice how the increment operator takes up a whole new line of code in the function? Recalling what the prefix increment returns can help us shorten the function.


// Event handler

function clickHandler() {


  // Increment counter

  span.innerHTML = ++numberOfPresses;

}

Voila! It has been shortened! If we want to go crazier, we can even use arrow functions. The entire script now looks like this.


// Global variable that counts how many times the button has been pressed

let numberOfPresses = 0;




// Stores necessary HTML elements

const button = document.getElementById('counter');

const span = document.getElementById('displayPressCount');




// Attach click listener to button

button.addEventListener('click',

  () => (span.innerHTML = ++numberOfPresses)

);

[TUTORIAL] ➡️ x++ vs ++x