Incrementing Variables in JavaScript

Like many things with JavaScript, incrementing and decrementing variables is ... a little weird.

The classic example is using i as an index-based iterator when looping through an array. Like this:

const sandwiches = ["Club", "Reuben", "Grilled Cheese"];

for (let i = 0; i < sandwiches.length; i++) {
  console.log(i, sandwiches[i]);
}

// => 0 'Club'
// => 1 'Reuben'
// => 2 'Grilled Cheese'

In this example, after each iteration within the for loop is completed, i++ is executed, which increments the variable, meaning it increases the value by 1. You can see this in the result above, where i is 0, then 1, then 2.

Another Incrementer: ++i

Did you know i++ isn't the only way to iterate on a variable? JavaScript also has an incrementing function that can be written with the plus ahead of the variable, e.g. ++i.

Replace the i++ above with ++i and see what you get. (You can edit this Pen if you'd like.)

Nothing changes! That's because the result of both i++ and ++i leave i with a value 1 more than it previously had.

But they are different! The difference is baked into how i is returned from the incrementing function:

• i++ returns i before incrementing it.
• ++i returns i after incrementing it.

Consider this:

let i = 0;
console.log(i); // => 0

console.log(i++); // => 0
console.log(i); // => 1

console.log(++i); // => 2
console.log(i); // => 2

Notice that when we log i++ we're logging the return value of running i++, which is 1, since i was returned before incrementing.

Another Third Player: i+=1

There's another type of operation that can be used for incrementing in JavaScript! 🤯

The += operator is called the addition assignment. It works by adding the right side of the equation to the variable on the left, and then storing the result in the variable.

This works similarly to ++i in that the return value of the function call is the value of i after the addition was applied.

let i = 0;
console.log(i); // => 0

console.log(i++); // => 0
console.log(i); // => 1

console.log(++i); // => 2
console.log(i); // => 2

console.log((i += 1)); // => 3
console.log(i); // => 3

And you don't have to use 1 either. You could use any value and it will be applied to i.

let i = 0;
console.log(i); // => 0

console.log(i++); // => 0
console.log(i); // => 1

console.log(++i); // => 2
console.log(i); // => 2

console.log((i += 1)); // => 3
console.log(i); // => 3

console.log((i += 2)); // => 5
console.log(i); // => 5

And now you have the knowledge to go impress your coworkers by incrementing all the variables!