Categories
JavaScript Best Practices

JavaScript Best Practices — No Useless Syntax

Spread the love

To make code easy to read and maintain, we should follow some best practices.

In this article, we’ll look at some best practices we should follow to make everyone’s lives easier.

No await Without Promises

We should use await only with promises.

It’s definitely an error if we use await with anything else.

For instance, instead of writing:

async function foo(){
  return 10;
}

We write:

async function foo(){
  const val = await aPromise;
}

No Comma Operator

We should never use the comma operator.

All it does is return the last thing in the list.

So instead of writing”

switch (foo) {
  case 1, 2, 3:
    return true;
  case 4, 5:
    return false;
}

We write:

switch (foo) {
  case 3:
    return true;
  case 5:
    return false;
}

Use Curly Braces for if, for, do, or while Statements

We should use curly braces for these statements so that we know where block starts or ends.

Instead of writing:

if (foo === 'baz')
  foo = 10;

We write:

if (foo === 'baz') {
  foo = 10;
}

This way, if we have anything below it, we won’t mistaken it to be within the block.

for-in Should have Filtered with an if Statement

If we write a for-in loop, we should filter out the inherited properties with hasOwnProperty .

For instance, instead of writing:

for (let key in obj) {
  // do something
}

We write:

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    // do something
  }
}

No Function Constructor

We shouldn’t use the Function constructor for creating functions.

The code is in a string, which means we can’t analyze or optimize it.

And it’s also a security risk.

So instead of writing:

let multiply = new Function('a', 'b', 'return a * b');

We write:

let multiply = (a: number, b: number) => a * b

Use of Labels

Labels are only meant to be used with do , for , while , or switch statements.

They’re used with break or continue to control loops.

For instance, we write:

A:
  while (foo) {
    if (bar) {
      continue A;
    }
  }

We labeled the loop with A .

Then we used continue on it, which is run if bar is true .

Don’t Use argument Properties

We shouldn’t use arguemnt.callee to get the function that calls the function.

It makes optimization impossible.

It’s also disallowed in strict mode.

No async Without await

We shouldn’t use async without await .

If there’s no await , which means we aren’t using any promises in the function.

Then that means we don’t need it.

So instead of writing:

async function f() {
  doSomething();
}

We write:

async function f() {
  await makeRequest();
}

where makeRequest is a function that returns a promise.

No Assignment in Conditionals

Assigning values in conditions without comparison or other boolean expressions is probably a mistake.

So we should check for those.

For instance, if we have:”

if (foo == bar ){
  //...
}

We should make sure that it’s valid.

No Duplicate super Calls

In a subclass’s constructor , we only need to call super once.

If we call it more than once, we’ll get an error.

For instance, instead of writing:

class Foo extends Bar {
  constructor() {
    super(name);
    super(name);
  }
}

We write:

class Foo extends Bar {
  constructor() {
    super(name);
  }
}

No Duplicate Switch Cases

We should never have more than one case statement with the same value in a switch block.

Only the first case will be run because of short-circuiting.

For instance instead of writing:

switch (bar) {
  case 1:
    return 'foo';
  case 1:
    return 'bar';
  case 2:
    return 'baz';
}

We write:

switch (bar) {
  case 1:
    return 'foo';
  case 2:
    return 'baz';
}

No Duplicate Variable

We should never have duplicate variables in our code.

var declarations can have duplicates that aren’t picked by the JavaScript interpreter.

So we make sure that we don’t have things like:

var a = 1;
var a = 2;

We should remove one of them, or better yet, use let or const instead of var .

Conclusion

We shouldn’t have duplicate var declarations or case blocks.

Curly braces help with delimiting blocks.

await should only be used with promises.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

One reply on “JavaScript Best Practices — No Useless Syntax”

Leave a Reply

Your email address will not be published. Required fields are marked *