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 confusing arrows, assigning to const constants, and duplicate members.

Arrow Functions That Can Be Confused with Comparisons

Arrow functions have the => fat arrow which may be confused with inequality comparison operators like <= or => for people that may not be completely familiar with JavaScript.

Therefore, we may want to make our code easier to understand for them by not using arrow functions that look like comparison expressions.

For instance, the following function may be confusing for some people:

const foo = a => 1;

We have the foo function that has a parameter a and returns 1.

However, some people may confuse this with:

const foo = a >= 1;

or:

const foo = a <= 1;

which compares if a if bigger than or equal to 1 or if a is less than or equal to 1 respectively.

Therefore, we may want to make our arrow function less confusing by wrapping the function body with curly braces or wrapping the function signature with parentheses.

For instance, we can rewrite the the foo function in the following way:

const foo = a => {
  return 1
};

The code above makes our function clear by indicating that we want to return the value 1.

We can also rewrite it as follows:

const foo = (a) => 1;

The parentheses make our code’s reader clear than a is a parameter and it’s not a variable that we want to compare with 1.

No Modifying Variables That are Declared Using const

In JavaScript, constants that are declared with const can’t be reassigned to a new value.

If we write something like the following code, then we’ll get an error:

const a = 1;
a = 2;

When we run the code above, we’ll get the error ‘Uncaught TypeError: Assignment to constant variable.’ in the console and the code will stop running.

Therefore, we should be mindful of not doing that. If we want a to be able to be reassigned to a different value, then we should declare it with let instead.

For instance, we instead write the following:

let a = 1;
a = 2;

This way, a is declared as a variable instead of a constant and thus it can be reassigned to a new value.

Other operators that do assignment operation like += , -= , *= , /= , and %= also won’t work with const constants.

For instance, we’ll get the same error if we write the following:

const a = 1;
a += 2;

Loop variables that are declared with const also can’t be reassigned to a different value. For instance, we’ll get an error if we write:

for (const a in [1, 2, 3]) {
  a = 1;
}

In the code above, we tried to reassign a to 1, which also won’t work.

Duplicate Member Name in Classes

We don’t want duplicate member names in classes. This is because it’s confusing which one is actually the one that’s kept.

For instance, we shouldn’t be writing code like this:

class Foo {
  bar() {
    console.log("foo");
  }

  bar() {
    console.log("bar");
  }
}

In the code above, we have 2 bar instance methods. The 2nd would be kept, so the first one is useless.

Therefore, when we call the bar method as follows:

const foo = new Foo();
foo.bar();

We’ll see 'bar' logged in the console log output.

Therefore, we should just keep the one we want to keep or rename one of them if we need both.

We can write something like the following:

class Foo {
  foo() {
    console.log("foo");
  }

  bar() {
    console.log("bar");
  }
}

Then we can call both instance methods and see the logged value of both in the console.

Conclusion

We may want to rewrite arrow functions that may be confused with comparison expressions.

To do that, we can put our function signature in parentheses or add curly braces to the function body.

We shouldn’t reassign const constants to another value. That’s why it’s a constant.

Also, we shouldn’t have multiple members with the same name in a class. That’s just useless and confusing since the one that’s defined later just overwrites the one we have above.

The post JavaScript Best Practices — Arrows, Const, and Duplicate Members appeared first on The Web Dev.