JavaScript Best PracticesArrows, Const, and Duplicate Members

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

In this article, well 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 codes reader clear than a is a parameter and its 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 cant be reassigned to a new value.

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

const a = 1;a = 2;

When we run the code above, well 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 wont work with const constants.

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

const a = 1;a += 2;

Loop variables that are declared with const also cant be reassigned to a different value. For instance, well 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 wont work.

Duplicate Member Name in Classes

We dont want duplicate member names in classes. This is because its confusing which one is actually the one thats kept.

For instance, we shouldnt 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();

Well 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 shouldnt reassign const constants to another value. Thats why its a constant.

Also, we shouldnt have multiple members with the same name in a class. Thats just useless and confusing since the one thats defined later just overwrites the one we have above.

The post JavaScript Best PracticesArrows, Const, and Duplicate Members appeared first on The Web Dev.