JavaScript Increment ++ and Decrement --

A quick lesson in why location of Increment and Decrement matters

Brandon Morelli
codeburst

--

Image via unsplash.com

Welcome to this weeks JavaScript Quickie — 3 Minute JavaScript Lessons

Increment & Decrement

The increment and decrement operators in JavaScript will add one (+1) or subtract one (-1), respectively, to their operand, and then return a value.

The term operand is used extensively in this article. An operand is the quantity on which an operation is to be done. For example in the math equation 1 + 2, both 1 and 2 are operands, while + is the operator.

Syntax

Consider x to be the operand:

  • Incrementx++ or ++x
  • Decrementx-- or --x

As you can see, the ++/ —- operators can be used before or after the operand. Here’s what that might look in your code:

// Incrementlet a = 1;
a++;
++a;
// Decrement
let b = 1;
b--;
--b;

Using ++/-- After the Operand

When you use the increment/decrement operator after the operand, the value will be returned before the operand is increased/decreased.

Check out this example:

// Incrementlet a = 1;console.log(a++);    // 1
console.log(a); // 2
// Decrementlet b = 1;console.log(b--); // 1
console.log(b); // 0

When we first log out the value of a, or b, neither has changed. That’s because the original value of the operand is being returned prior to the operand being changed. The next time the operator is used, we get the result of the +1, or -1.

Using ++/-- Before the Operand

If you’d rather make the variable increment/decrement before returning, you simply have to use the increment/decrement operator before the operand:

// Incrementlet a = 1;console.log(++a);    // 2
console.log(a); // 2
// Decrementlet b = 1;console.log(--b); // 0
console.log(b); // 0

As you can see in the above example, but using ++ or -- prior to our variable, the operation executes and adds/subtracts 1 prior to returning. This allows us to instantly log out and see the resulting value.

Closing Notes:

Thanks for reading, and hopefully this was helpful! If you’re ready to finally learn Web Development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇

--

--

Creator of @codeburstio — Frequently posting web development tutorials & articles. Follow me on Twitter too: @BrandonMorelli