JavaScript Best Practices — Tabs and Arithmetic

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at the use of the ++ and -- operators in JavaScript and replacing tabs with spaces.

The Unary Operators ++ and --

The ++ and -- operators let us increment and numeric variable by 1.

For instance, if we have the following code:

let x = 1;
x++;

Then x is first assigned to one, and then it becomes 2 because x++ increases it by 1.

The ++ operator can also be used before a variable. For instance, we can write the following code:

let x = 1;
++x;

The code above also assigns the variable to 1 first. Then it increases the variable x to 2.

The difference between using it before the variable and using it after is that when it’s added after the variable, then it increments and returns the value before incrementing.

If it’s used before the variable, then it increments and returns the value after incrementing.

That made no difference before or after in our case because we didn’t assign it to any variable.

However, if we’re assigning it to a variable or constant, then it matters. For instance, if we have the following code:

let x = 1;
const y = ++x;

Then x and y are both 2 since x ‘s latest value is returned after it’s incremented and then the latest value is assigned to y .

On the other hand, if we have the following code:

let x = 1;
const y = x++;

Then x is 2 and y is 1 since x ‘s old value is returned when the increment operation is being done, so it’s the old value of 1 is assigned to y .

-- is similar to ++ except that it decrements the variable by 1 rather than incrementing it by 1.

We can see that the similar result as ++ if the -- is applied before or after the variable.

Therefore, whether ++ or -- comes before or after the variable matters.

Spaces also matter. We shouldn’t have any spaces whether the operators are added before or after the variable.

For instance, we shouldn’t write code like the following:

let x = 1;
let y = 1;
x
++
y;

In the code above x stays as 1 but y is 2 because the JavaScript interpreter interprets it as the following:

let x = 1;
let y = 1;
x
++y;

Therefore, y is incremented, but x isn’t.

To make increment and decrement operations clearer, we can instead write the following:

let x = 1;
x += 1;

Then x is increment by 1, so x becomes 2.

This also works for incrementing x by any number. So we can write something like:

let x = 1;
x += 2;

to increment x by 2.

There’re also corresponding operators for subtraction, multiplication or division.

For instance, we can write the following for subtraction:

let x = 1;
x -= 2;

For multiplication, we can write:

let x = 1;
x *= 2;

and for division, we can write the following:

let x = 1;
x /= 2;

These are clearer that ++ or -- , so we should also consider using these operators to arithmetic operations in addition to assigning the new value to the same variable.

No Tab Characters

Tab characters are a pain. They aren’t consistent in all operating systems or text editors.

Therefore, we should think twice about using tabs in our code. Using tabs saves typing, but creates issues with inconsistencies of their spacing between operating systems and text editors.

One good way to keep using the tab key to save typing is to convert them to 2 spaces.

Spaces are almost always consistent with most text editors and operating systems. Therefore, there won’t be any issues with spacing when we opening the same file in different text editors or operating system utilities.

Conclusion

The ++ and -- operators may bring confusion. They can be added before or after a variable and they act differently as to when the updated value is returned.

If these operators are applied before the variable, then the newest value is returned right away so that we can assign the updated to another variable.

On the other hand, the value is returned value would still be the old value, so if we try to assign to a variable, it would be assigned the old value.

They both increment, but the returned value for them is different.

Tab characters shouldn’t be used in our code. If we want to save typing, we should convert tabs to spaces automatically.

The post JavaScript Best Practices — Tabs and Arithmetic appeared first on The Web Dev.